Jesus  Moran

Jesus Moran

1622824320

Modern Redux with Redux Toolkit

Redux Toolkit is the official, opinionated, batteries-included toolset for efficient Redux development. Mark Erikson (@acmemarke), long-time Redux maintainer and avid blogger about all things web development showed us the potential of Redux in action with an awesome demo!

Some handy links you might encounter in the video:
➡️ https://blog.isquaredsoftware.com/2021/01/context-redux-differences/
➡️ https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/
➡️ https://github.com/immerjs/immer

  • 00:00 - Intro
  • 00:25 - Meet Mark Erikson
  • 02:57 - Is Redux dead?
  • 06:25 - Redux is a jack of all trades
  • 09:00 - What makes the Modern Redux tick? v7.1, Hooks
  • 10:43 - useSelector hook
  • 11:31 - useDispatch
  • 13:23 - What is Redux ToolKit & what does it do?
  • 15:30 - configureStore
  • 17:00 - Immer
  • 18:25 - createReducer API
  • 19:19 - createAction
  • 19:57 - createSlice
  • 23:27 - createSelector
  • 23:40 - createAsyncThunk
  • 24:40 - createEntityAdapter
  • 26:43 - Redux Toolkit safety check
  • 28:20 - Redux Toolkit: RTK Query
  • 32:57 - App Setup
  • 34:05 - App Usage
  • 35:05 - Redux Templates for Create-React-App
  • 35:40 - Coding demo time! - Redux + TypeScrypt + Vite App Example
  • 47:28 - RTK Query Overview
  • 50:05 - New “Redux Essential” Tutorial
  • 51:35 - Outro

React All-Day is a long-format stream of fun and learning with React experts, and live coding from familiar names and faces from around the React world!

Eight awesome guests covered eight exciting topics from sessions on testing, data management, full-stack frameworks to programming concepts, and more.

React Wednesdays is a weekly chat show with the best and brightest from the React world. Join us live every Wednesdays to hang out and ask questions. Learn more about the show and upcoming episodes at https://www.telerik.com/react-wednesdays.

#redux #redux

What is GEEK

Buddha Community

Modern Redux with Redux Toolkit
Jesus  Moran

Jesus Moran

1622824320

Modern Redux with Redux Toolkit

Redux Toolkit is the official, opinionated, batteries-included toolset for efficient Redux development. Mark Erikson (@acmemarke), long-time Redux maintainer and avid blogger about all things web development showed us the potential of Redux in action with an awesome demo!

Some handy links you might encounter in the video:
➡️ https://blog.isquaredsoftware.com/2021/01/context-redux-differences/
➡️ https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/
➡️ https://github.com/immerjs/immer

  • 00:00 - Intro
  • 00:25 - Meet Mark Erikson
  • 02:57 - Is Redux dead?
  • 06:25 - Redux is a jack of all trades
  • 09:00 - What makes the Modern Redux tick? v7.1, Hooks
  • 10:43 - useSelector hook
  • 11:31 - useDispatch
  • 13:23 - What is Redux ToolKit & what does it do?
  • 15:30 - configureStore
  • 17:00 - Immer
  • 18:25 - createReducer API
  • 19:19 - createAction
  • 19:57 - createSlice
  • 23:27 - createSelector
  • 23:40 - createAsyncThunk
  • 24:40 - createEntityAdapter
  • 26:43 - Redux Toolkit safety check
  • 28:20 - Redux Toolkit: RTK Query
  • 32:57 - App Setup
  • 34:05 - App Usage
  • 35:05 - Redux Templates for Create-React-App
  • 35:40 - Coding demo time! - Redux + TypeScrypt + Vite App Example
  • 47:28 - RTK Query Overview
  • 50:05 - New “Redux Essential” Tutorial
  • 51:35 - Outro

React All-Day is a long-format stream of fun and learning with React experts, and live coding from familiar names and faces from around the React world!

Eight awesome guests covered eight exciting topics from sessions on testing, data management, full-stack frameworks to programming concepts, and more.

React Wednesdays is a weekly chat show with the best and brightest from the React world. Join us live every Wednesdays to hang out and ask questions. Learn more about the show and upcoming episodes at https://www.telerik.com/react-wednesdays.

#redux #redux

Simplifying Redux with Redux Toolkit

Redux Toolkit is an opinionated, batteries-included toolset for efficient Redux development. In this article, you will see why the Redux Toolkit deserves more attention in the React community.

React and Redux believed to be the best combo for managing state in large-scale React applications. However, with time, the popularity of Redux fallen due to;

  • Configuring a Redux store is not simple.
  • We need several packages to get Redux to work with React.
  • Redux requires too much boilerplate code.

With these issues, the creator of Redux Dan Abramov published the article called You Might Not Need Redux , which advises people to use Redux only when it needs and to follow other methods when developing less complex applications.

#redux-toolkit #redux #react

Sidney  Purdy

Sidney Purdy

1595681400

How To Setup Redux Slices with Redux Toolkit

Redux Toolkit popularity is growing every month. What exactly helps developers to write code faster, easier, more clearly? One of the helpers is createSlice function. createSlice takes an object of reducer functions, a slice name, and an initial state value and lets us auto-generate action types and action creators, based on the names of the reducer functions that we supply. It also helps you organize all of your Redux-related logic for a given slice into a single file.

What is createSlice?

It’s a function that deals with everything you need for each slice, do you remember using createAction and createReducer manually? Now it’s available in this specific slice function.

So what the returned object from createSlice contains:

  • name: a parameter that will be the prefix for all of your action types
  • initialState: the initial values for our reducer
  • reducers: it’s an object where the keys will become action type strings, and the functions are reducers that will be run when that action type is dispatched.

The other benefit of using createSlice is our files structure. We can put all of our Redux-related logic for the slice into a single file. You’ll see how to do it in our tutorial.

Slice configuration

We have made basic Redux configuration with Redux Toolkit. But what is the most important benefit of using Toolkit? Definitely, it’s createSlice function that you will probably use for most application you’re developing.

If you don’t want to start from zero, you can use our basic Redux configuration with Redux Toolkit.

To our previous little app with fake authorization, we’re gonna add a feature to show users data to logged user.

Firstly let’s create file src/store/users.js and create our slice:

import { createSlice } from '@reduxjs/toolkit'

// Slice

const slice = createSlice({
    name: 'users',
    initialState: {
        users: []
    },
    reducers: {
        getUsers: (state, action) => {
            state.users = action.payload;
        },
    },
});

export default slice.reducer

That’s basic slice configuration, it contains nameinitialState and reducers parameters.

Adding actions

Now let’s add actions. To keep it clear and simply add it in our slice’s file. We don’t have to write them individually in separate file anymore. We can export all the actions. the reducer, the asynchronous thunk and selector that gives us access to state from any component without using connect.

import { createSlice } from '@reduxjs/toolkit'
+ import { api } from '../api/index'

// Slice

const slice = createSlice({
    name: 'users',
    initialState: {
        users: [],
    },
    reducers: {
        usersSuccess: (state, action) => {
            state.users = action.payload;
            state.isLoading = false;
        },
    },
});

export default slice.reducer

// Actions

+ const { usersSuccess } = slice.actions

+ export const fetchUsers = () => async dispatch => {
+    try {
+        await api.get('/users')
+            .then((response) => dispatch(usersSuccess(response.data)))
+    }
+    catch (e) {
+        return console.error(e.message);
+    }
+}

#react #front-end-development #redux #software-development #startup #redux toolkit

Sidney  Purdy

Sidney Purdy

1595688780

Redux Tutorial: An Overview and Walkthrough with React + Redux Toolkit

Do you have experience using React? Have you heard of Redux, but you’ve put off learning it because it looks very complicated and all the guides seem overwhelming? If that’s the case, this is the article for you! Contain your fear of containing state and come along with me on this relatively painless journey.

Prerequisites

You must already know how to use React for this tutorial, as I will not be explaining any aspects of React itself.

Also, download Redux DevTools for Chrome or for FireFox.

Goals

In this tutorial, we will build a small blog app. It will fetch posts and comments from an API. I’ve created the same app with both plain Redux, and Redux Toolkit (RTK), the officially sanctioned toolset for Redux. Here are the links to the source and demos of both the plain and RTK versions.

React + Redux Application (Plain Redux)

React + Redux Toolkit Application

Note: The applications are pulling from a real API via JSON Placeholder API. Due to rate limiting on CodeSandbox, the API may appear slow, but it has nothing to do with the Redux application itself. You can also clone the repository locally.

We will learn:

  • What is Redux and why you might want to use it
  • The terminology of Redux: actions, reducers, store, dispatch, connect, and container
  • Making asynchronous API calls with Redux Thunk
  • How to make a small, real-world application with React and Redux
  • How to use Redux Toolkit to simplify Redux app development

What is Redux?

Redux is a state container for JavaScript applications. Normally with React, you manage state at a component level, and pass state around via props. With Redux, the entire state of your application is managed in one immutable object. Every update to the Redux state results in a copy of sections of the state, plus the new change.

Redux was originally created by Dan Abramov and Andrew Clark.

Why should I use Redux?

  • Easily manage global state - access or update any part of the state from any Redux-connected component
  • Easily keep track of changes with Redux DevTools - any action or state change is tracked and easy to follow with Redux. The fact that the entire state of the application is tracked with each change means you can easily do time-travel debugging to move back and forth between changes.

The downside to Redux is that there’s a lot of initial boilerplate to set up and maintain (especially if you use plain Redux without Redux Toolkit). A smaller application may not need Redux and may instead benefit from simply using the Context API for global state needs.

In my personal experience, I set up an application with Context alone, and later needed to convert everything over to Redux to make it more maintainable and organized.

Terminology

Usually I don’t like to just make a list of terms and definitions, but Redux has a few that are likely unfamiliar, so I’m just going to define them all up front to make it easy to refer back to them. Although you can skip to the beginning of the tutorial section, I think it would be good to read through all the definitions just to get exposure and an idea of them in your head first.

I’ll just use the typical todo application, and the action of deleting a todo, for the examples.

#redux #react #tutorial #redux toolkit #programming

Dipesh Malvia

Dipesh Malvia

1631789409

React Redux Toolkit with Project | Redux Middleware Thunk | React Redux Tutorial For Beginners - 2

React Redux Toolkit with Project | Redux Middleware Thunk | React Redux Tutorial For Beginners - 2

In this video we are going to learn about React - Redux using Redux toolkit by build a project movie rating application from scratch. This video course is specially if you are planning to learn React with Redux Toolkit State Management library as a beginner. We will build a movie rating application and along with that we will use Axios for API calls, React Router DOM for Routing and Node-SASS for our SCSS compile to CSS. 

We will continue to enhance the application we will see how we can convert a synchronous action creator into a asynchronous action creator using Redux Middleware Thunk. 

You will find the topics covered in the timestamp below. 

⭐️React Redux Toolkit with Project - Part 1 - https://youtu.be/EnIRyNT2PMI 

⭐️GitHub link for Reference - https://github.com/dmalvia/React_Redux_ToolKit_Movie_App 

⭐️OMDB API - https://www.omdbapi.com/ 

⭐️ Support my channel - https://www.buymeacoffee.com/dipeshmalvia

 ***React Roadmap for Developers in 2021*** 

  • How to Learn React JS ? - https://youtu.be/06yVj8pcO5c 
  • React Fundamentals Project - https://youtu.be/QoJGKwo20is 
  • Learn React Redux with Project - https://youtu.be/0W6i5LYKCSI 
  • What is Redux ? - https://youtu.be/qNjNn9BCWCc 
  • Learn React Redux Thunk with Project - https://youtu.be/JDZRfLGNWdc 
  • Learn CSS GRID Tutorial - https://youtu.be/zs7JzkWixPo 

***Checkout these video to understand better*** 

  • JavaScript ES6 Arrow Functions - https://youtu.be/TgzVxiPdCDU 
  • JavaScript Higher Order Functions & Arrays Methods - https://youtu.be/m2_kagsc3_c 
  • JavaScript ES6 Destructuring - https://youtu.be/rpYg2M2lNAE 

🔥 Video contents... ENJOY 👇

  •  0:00:00 - Intro 
  • 0:00:24 - Application Demo 
  • 0:02:23 - Unacademy Promo 
  • 0:05:00 - Code Walkthrough Sync Action Creators 
  • 0:05:30 - Redux Middleware Thunk - Redux Toolkit 
  • 0:06:36 - Create Async Action Creator 
  • 0:08:57 - Create extraReducers 
  • 0:09:22 - Async Action Creator Lifecycle 
  • 0:13:41 - Async Action - Fetch Shows 
  • 0:15:53 - Add Shows to Movie Listing Component 
  • 0:18:57 - Add CSS Transition 
  • 0:20:13 - Navigation - Movie Detail Component 
  • 0:23:19 - Async Action - Fetch Movie Details 
  • 0:25:49 - useParams Hook 
  • 0:30:00 - Movie Detail Component with SCSS 
  • 0:42:10 - UseEffect Cleanup Function 
  • 0:43:00 - Sync Action - Remove Selected Movie/Show 
  • 0:45:04 - Conditional Movie Detail Loading 
  • 0:47:33 - Outro 

***More videos*** 

  • JSON Crash Course - https://youtu.be/6OhMbf2v_jI 
  • Asynchronous Vs Synchronous Programming - https://youtu.be/oesicy3CcXE 
  • Async JavaScript Callback - https://youtu.be/1zeuvEvw5uw 
  • Async JavaScript Promises Tutorial - https://youtu.be/JvV4Rz2PpzA 

***Checkout my crash courses for get started with web development*** 

  •  HTML5 Crash Course in 1 Hour - https://youtu.be/Aj3QFsmsagc 
  • CSS Crash Course in 1 Hour - https://youtu.be/nYsk_U_A_lc 
  • JavaScript Tutorial for Beginners - https://youtu.be/sptS-bgg8Ro

🔗 Social Medias 🔗 

  • Twitter: https://twitter.com/IMDmalvia 
  • Facebook: https://www.facebook.com/programmingwithdipesh 
  • Instagram: https://www.instagram.com/dipeshmalvia 
  • LinkedIn: https://www.linkedin.com/in/dmalvia/ 

⭐️ Tags ⭐️ 

  • React Redux Toolkit 
  • React Redux Toolkit Tutorial 
  • React Redux Toolkit Crash course 
  • React Redux Toolkit Project
  •  React Redux For Beginners 

⭐️ Hashtags ⭐️ 

#React #Redux #Toolkit #Beginners#Tutorials 

Disclaimer: It doesn't feel good to have a disclaimer in every video but this is how the world is right now. All videos are for educational purpose and use them wisely. Any video may have a slight mistake, please take decisions based on your research. This video is not forcing anything on you.