From Setup to Mastery: Dive into Efficient State Management with Redux Toolkit in React

Introduction

What is Redux?

Redux is a library for managing and centralizing the state of application in javascript. The state refers to the data that determines how a user interface (UI) looks and behave at any given time. Centralizing the state means storing all the application’s state in a single location, typically called the “Store”, which makes it easier to manage, debug, and maintain. By using Redux, developers can ensure that the state remains consistent and predictable across the entire application, even as it grows in complexity.

Why Use Redux?

• Predictability: Redux makes it easier to understand how your application’s state changes over time.
• Centralized State: Keeps the state in one place, making it easier to manage and debug.
• Scalability: Ideal for large applications with complex state logic.

Where is Redux Used?

Redux is commonly used in applications that require:

• Complex state management
• Predictable state transitions
• Debugging tools like Redux Dev Tools

Example: Understanding Redux in a Foodie application.

Let’s take an example for better understanding of why and where we use Redux. Imagine you have a food ordering application, as shown in the image above. Each item has an ” ADD | + ” button next to it.

The Redux store, represented on the right side of the image, is where the application state is managed. It contains multiple slices, each is responsible for a specific part of the state. In the above example, we have a ‘cart’ slice and a ‘user’ slice.

When you click the “ADD | +” button, how does the app send the selected item to the cart and update the cart by increasing the item count?

When some action is performed (Button click) an action is dispatched in Redux. The dispatched action is handled by a reducer function associated with the ‘cart’ slice. The reducer determines how the state should be updated based on the action’s payload.

Don’t be intimidated by terms like reducers, dispatch, action, payload, and others. Instead, focus on understanding the overall flow of how Redux works. As you gradually grasp the basics, you’ll naturally become proficient in state management with Redux. You’ll eventually dive deep into each concept, understanding them thoroughly through prectical coding examples.

The above diagram illustrates how to write or manipulate slices in the Redux store.

Now, let’s understand how data is accessed and dynamic updates are made with selectors in Redux.

Once we modify slices in the Redux store, the next step is accessing and using that data dynamically. This is where selectors come into play. A selector is a function that extracts specific pieces of state from the store. When we modify the slice, such as updating the cart items, we use a selector to retrieve and update the cart count dynamically on the UI.

In Redux, when we use a selector, the component becomes subscribed to the store. This means that whenever the specific piece of state that the selector is concerned with changes, the component will automatically re-render with the updates state. For instance, if you modify the cart items slice in the Redux store, the cart count displayed on the page will update accordingly through the selector.

When you click the “ADD” button in our foodie application, it triggers a dispatch action. This action calls the reducer function associated with the cart slice. The reducer function then modifies the cart slice in the Redux store. The cart component is subscribed to the store using the selector. As a result, when the cart slice is updated, the cart count is dynamically updated on the UI. This seamless flow from dispatching an action to updating the state and re-rendering the component is what makes Redux a powerful state management tool.

Setting Up Redux in a React Application

Libraries Required:

1. React-Redux: Provides bindings to connect Redux with React components, allowing React components to read from the Redux store and dispatch actions. Use: It provides the ‘provider’ component to make the Redux store available to all components, and hooks like ‘useSelector’ and ‘useDispatch’
2. Redux Toolkit: A Set of tools for efficient Redux development, offering a simplified approach to setting up and working with Redux, latest way of writing redux. Use: The Redux Toolkit package is designed to be the go-to solution for writing Redux logic efficiently. It was developed to tackle three major issues often associated with Redux:

• Complex Store Configuration: Simplifies the process of setting up a Redux store.
• Excessive Packages: Reduces the need for multiple additional packages to make Redux functional.
• Boilerplate Code: Minimizes the amount of repetitive code needed to use Redux effectively.

Installation

Redux Toolkit is available as a package on NPM for use with a module bundler.

npm install @reduxjs/toolkit
npm install react-redux

Create Redux Store

Use ‘configureStore’ from Redux Toolkit to set up the Redux store. This function automatically includes Redux DevTools integration.

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

const appStore = configureStore({
        //You can add slices over here
    });

export default appStore;

Wrap your Application with ‘provider‘ To make the Redux store accessible to your React components, Wrap your root component with the ‘provider’ component from ‘react-redux’. Pass the store as a prop to the provider.

Example:

import { Provider } from 'react-redux';
import appStore from ../utils/appStore.js;

<Provider store={appStore}>
    <app/>
</Provider>

Why did configureStore is imported from redux-Toolkit and Provider from react-redux ??

Reason: configureStore is imported from redux-toolkit because it is used to build the store, which is related to Redux. On the other hand, Provider is imported from react-redux because it provides the store to the application, effectively bridging Redux and React.”

Create a Redux Slice

use ‘createSlice’ from Redux Toolkit to define a slice of the state along the actions and reducers.

• Actions: Actions are payloads of information that send data from your application to your Redux store.
• Reducers: Reducers are pure functions that specify how the application’s state changes in response to actions.

If you don’t understand what it is right now, just hold on; you’ll be exploring in depth how it all works soon.

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

const cartSlice = createSlice({
    name: 'cart',
    initialState: {
        items: []
    },
    reducers: {
          addItem: (state, action) =>{
                state.items.push(action.payload);
         },
  }
});

export const {addItem}=cartSlice.actions;
export default cartSlice.reducer;

Explanation

The createSlice function from @reduxjs/toolkit is used to create a slice of the Redux state with a specific configuration. This configuration includes:

createSlice Configuration:

• name: ‘cart’: This gives a name to the slice, which can be used for debugging or in action types.
• initialState: { items: [] }: This sets the initial state with an items array, which starts as empty.
• reducers: This is an object containing all the reducer functions for this slice.

Reducers:

• addItem: (state, action) : This function defines the logic for adding an item to the cart.It takes the current state and an action as parameters.
• state.items.push(action.payload): This adds the new item (payload of the action) to the items array in the state.

Exporting:

• export const { addItem } = cartSlice.actions: This exports the addItem action creator, allowing other parts of the application to dispatch this action.
• export default cartSlice.reducer: This exports the reducer function to be used in the Redux store configuration.

Now your slice is ready to be added to the store.

To add your slice to the store, we need to configure the store with the configureStore function, which combines the slice reducers into the main root reducer.

import { configureStore } from "@reduxjs/toolkit";

const appStore = configureStore({
//root reducer
  reducer: {
      cart: cartReducer, //Adding cart slice reducer to the store
  },
});

export default appStore;

Step 1: Understanding Dispatch in Redux

Dispatch is a function provided by Redux that allows you to send actions to the Redux store. These actions are plain JavaScript objects that describe what happened in your application, and the store uses them to update the state via reducer functions.

How to Import and Use Dispatch

To use dispatch in a component, you’ll first import useDispatch from the react-redux library. Then, within your component, you call useDispatch to get the dispatch function and use it to send actions to the Redux store.

import { useDispatch } from 'react-redux';
import { addItem } from './cartSlice';
const FoodieComponent = () => {
  const dispatch = useDispatch();
  const handleAddItem = () =>{
    dispatch(addItem("pizza"));
  };
  return(
    <div>
      <button onClick={handleAddItem}> ADD | + </button>
    </div>
  );
};

export default FoodieComponent; 

Step 2: What is a Reducer?

A reducer is a pure function in Redux that takes the current state and an action as arguments and returns a new state. It determines how the state of your application changes in response to actions dispatched to the store. Each reducer typically manages a specific slice of the application state.

How to Import and Use a Reducer

These are already covered above while creating a slice and reducers within the slice, along with an example.

Step 3: What is a Selector

A selector in Redux is a function that extracts specific pieces of data from the Redux store. Selectors are used to read and retrieve state from the store so that components can use this data.

How to Import

Selectors are used with the useSelector hook from the react-redux library.

import { useSelector } from 'react-redux';
const cartComponent = () =>{
   const cartItemsCount = useSelector((state)=> state.cart.items.length);
   return(
     <div>
        <h2>Cart Items: {cartItemsCount}</h2>
     </div>
    );
  };     
export default cartComponent;

Explanation:

useSelector: This hook is imported from react-redux and is used to access the Redux store’s state.

state.cart.items.length: The selector function retrieves the length of the items array from the cart slice, which represents the number of items in the cart. This value is then displayed in the CartComponent.

This approach allows the CartComponent to dynamically update whenever the number of items in the cart changes.

Conclusion

In this article, we’ve taken a deep dive into Redux, starting from the fundamental concepts of what Redux is, why it’s used, and where it’s applied in applications. We then walked through a practical example using a foodie application to illustrate how Redux manages and centralizes state.

We explored the process of setting up Redux, including creating a store, providing the store to the application using a provider, and creating slices that encapsulate the logic for managing state. From there, we discussed the three essential steps of using Redux: dispatching actions, handling state updates through reducers, and selecting state with selectors. Each of these steps was accompanied by code examples to reinforce your understanding.

By following this guide, you should now have a solid foundation for implementing Redux in your applications. Whether you are a beginner or looking to sharpen your skills, mastering Redux will significantly enhance your ability to manage complex state logic in scalable and maintainable ways.

Further Reading

To continue your learning journey, here are some additional resources:

Redux Official Documentation: For an in-depth look at Redux, including advanced concepts and best practices, visit the official Redux documentation.

React Redux Guide: Learn how to integrate Redux with React by following the React Redux guide.

Redux Toolkit: Explore the Redux Toolkit, the official, recommended way to write Redux logic, which simplifies store setup and reduces boilerplate.

Redux Saga and Middleware: For managing complex asynchronous logic in Redux, consider looking into Redux Saga and other middleware options.

Scaling Redux Applications: As your applications grow, learn about best practices for scaling Redux to keep your codebase clean and manageable.

By continuing to explore these resources, you’ll be well-equipped to handle more complex scenarios and take full advantage of what Redux has to offer in your development projects.

“Mastering Redux is like learning to navigate the heart of your application—once you have control over the state, you have the power to shape the entire user experience. Keep coding, keep learning, and soon, no state will be too complex to manage.”