Redux Is This Easy Now? (with Redux-toolkit)

0:00 Cringy intro
0:28 What is Redux?
5:33 Getting started

⌨️ Source Code (to start tutorial)
https://github.com/hidjou/redux-toolkit-tutorial

⌨️ Source Code (complete)
https://github.com/hidjou/redux-toolkit-tutorial/tree/complete

#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

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 name, initialState 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

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.

Familiarity with HTML & CSS.
Familiarity with ES6 syntax and features.
Knowledge of React terminology: JSX, State, Components, Props, Lifecycle and Hooks
Knowledge of React Router
Knowledge of asynchronous JavaScript and making API calls

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

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

Lemuel Oberbrunner

1616982131