31. Redux Toolkit: Simplifying Redux Workflow

Redux has been a cornerstone of state management in React applications for many years. It's known for its predictability and robustness in managing application state. However, one of the common criticisms of Redux is the amount of boilerplate code required to set it up and maintain it. This is where Redux Toolkit comes into play, offering a more streamlined approach to using Redux in your applications.

Redux Toolkit is the official, recommended way to write Redux logic. It was introduced to simplify the Redux development process, providing developers with tools and best practices to make Redux easier to use. It includes utilities that help with store setup, reducers, and middleware configuration, among other things.

Why Use Redux Toolkit?

Before diving into how to use Redux Toolkit, it's important to understand why you might want to use it in the first place. Here are some of the key benefits:

• Reduced Boilerplate: Redux Toolkit reduces the amount of boilerplate code you have to write. It provides functions like createSlice and configureStore that abstract away much of the repetitive code.
• Immutability: Redux Toolkit uses Immer under the hood, allowing you to write simpler immutable update logic without having to manually create copies of state objects.
• Built-in Best Practices: It enforces best practices by default, such as using the Redux DevTools Extension and enabling the Redux Thunk middleware.
• Improved Developer Experience: With tools like createAsyncThunk, handling asynchronous logic becomes more straightforward and less error-prone.

Setting Up Redux Toolkit

To get started with Redux Toolkit, you first need to install it along with React Redux:

npm install @reduxjs/toolkit react-redux

Once installed, you can set up your Redux store using configureStore, which automatically sets up the store with good defaults:

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';

const store = configureStore({
  reducer: rootReducer,
});

export default store;

The configureStore function automatically sets up the Redux DevTools Extension and adds the redux-thunk middleware, making it easier to get started with Redux.

Creating Slices

A slice in Redux Toolkit represents a single feature of your app, and it includes both the reducer logic and the actions. You can create a slice using the createSlice function:

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

In this example, createSlice generates action creators and action types for each reducer function you provide. It also uses Immer to allow you to write "mutative" code that updates the state directly, while still keeping it immutable under the hood.

Using Redux Toolkit in Components

Once your slices and store are set up, you can use them in your React components. First, wrap your application with the Provider component from React Redux:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

Then, you can use hooks like useSelector and useDispatch to interact with the Redux store in your components:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './counterSlice';

const Counter = () => {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>Increment by 5</button>
    </div>
  );
};

export default Counter;

The useSelector hook allows you to extract data from the Redux store state, while the useDispatch hook gives you access to the dispatch function to send actions to the store.

Handling Asynchronous Logic with createAsyncThunk

One of the most powerful features of Redux Toolkit is the createAsyncThunk function, which simplifies the process of handling asynchronous logic. It enables you to define a thunk that dispatches pending, fulfilled, and rejected actions based on a promise:

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import axios from 'axios';

export const fetchUser = createAsyncThunk(
  'user/fetchUser',
  async (userId, thunkAPI) => {
    const response = await axios.get(`/api/user/${userId}`);
    return response.data;
  }
);

const userSlice = createSlice({
  name: 'user',
  initialState: {
    entity: null,
    loading: 'idle',
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => {
        state.loading = 'loading';
      })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.loading = 'idle';
        state.entity = action.payload;
      })
      .addCase(fetchUser.rejected, (state, action) => {
        state.loading = 'idle';
        state.error = action.error.message;
      });
  },
});

export default userSlice.reducer;

In this example, createAsyncThunk is used to create an asynchronous action that fetches user data from an API. The extraReducers field in the slice allows you to handle the different action states generated by createAsyncThunk.

Conclusion

Redux Toolkit significantly simplifies the process of working with Redux by reducing boilerplate, enforcing best practices, and providing powerful utilities for handling common tasks. By using Redux Toolkit, you can create more maintainable and scalable Redux applications with less effort.

Whether you're new to Redux or an experienced user, Redux Toolkit is a valuable tool that can enhance your React application's state management capabilities. As you continue to explore and build with Redux Toolkit, you'll likely find it a crucial part of your development toolkit.

Next page of the Free Ebook:

76React Developer Tools: Debugging in React

7 minutes