Redux Toolkit - The Best in Global State Management

As I near the completion of my Flatiron School capstone project, I wanted to reflect on my decision to implement Redux Toolkit for managing global state over ‘useContext’. Having experienced the ease and effectiveness of ‘useContext’ in a previous project, I hesitated initially to transition to Redux for my capstone. However, looking into Redux Toolkit capabilities more, I discovered its amazing benefits, particularly as an application grows in size and complexity.

Although there is a learning curve and the setup process involves many steps with a bit of boilerplate code to implement, the advantages gained are significant. Redux Toolkit’s ability to centralize all state management related logic into one place, offers a lot of clarity within the other components of the application.

Alright let’s jump in to setting up Redux Toolkit in your application. To install Redux Toolkit and its necessary dependencies, navigate to your project directory in the terminal and enter the following commands:

npm install @reduxjs/toolkit
npm install react-redux

The first command ‘npm install @reduxjs/toolkit’ installs the essential Redux Toolkit package and provides the tools for state management in your application. The second command ‘npm install react-redux’ installs a package specifically to use with React. It offers special bindings that are important for integrating Redux into your React application.

Great, now that Redux Toolkit is installed, let's set up the necessary boilerplate code to initialize and configure our Redux Store.

Let's start by creating a folder called ‘redux’ in the ‘src’ directory. This folder will serve as a home for all of our Redux related files. Inside the ‘redux’ folder, we will begin by creating the file to set up our Redux Store. This file can be named anything you like, but for simplicity, I am going to call it ‘store.js’.

This code snippet utilizes ‘configureStore’ from Redux Toolkit. It encapsulates a lot of functionality behind the scenes which simplifies our setup process. This file acts as the central command where all of your other Redux slices will converge. The ‘reducer’ field inside ‘configureStore’ is where you’ll include different slices of your applications state.

With the redux store setup, we can finally create what’s called a ‘slice’, which represents a specific portion of the application’s state. The following code snippet builds a slice called 'userSlice'. Let’s go over each of its components to understand what each part does:

The ‘createSlice’ function imported from Redux Toolkit, allows us to create the slice that will hold a portion of the applications state, in this instance, the user’s state. We then declare and export ‘userSlice’ which is a constant that utilizes the createSlice function to pass in pertinent information.

• ‘name’: Reflects the name of the slice, in this case ‘user’.
• ‘initialState’: This field establishes the initial state of the ‘userSlice’. In this case, it is initialized as null, but the initial state can differ depending on your desired outcome.
• ‘reducers’: This section defines the functionality responsible for updating the state. In this example, we defined a very simple reducer called ‘setUser’, when dispatched, will update the state of the user, with the value passed in called the ‘action.payload’.

Within the ‘setUser’ reducer, there are two parameters present: ‘state’ and action’

• ‘state’: Represents the current state of the ‘user’ portion of the application. It’s important to maintain immutability, so remember to use the spread operator when updating state.
• ‘action’: Refers to the action passed into the ‘setUser’ reducer when it is invoked.
• ‘action.payload’: Contains the new data that is passed when ‘setUser’ is called.

As a whole, the userSlice contains all of the information needed to alter the ‘users’ state. As the application grows, you can create additional reducers to manage different aspects of your state.

Now that we have built out our Redux Store and defined a slice (‘user’), there are just a couple more steps to fully utilize redux in our application.

Remember, our Redux Store acts as a central hub for every slice we define. In order to have access to ‘userSlice’ in the rest of our application, we need to import it into ‘store.js’. This enables us to dispatch actions related to the ‘user’ throughout the application.

In this code snippet, we import ‘userReducer’ from the ‘user.js’ file. The reducer object within the 'configureStore' function now needs to be modified. Here, we assign ‘userReducer’ a key of ‘user’. This essentially links all of the reducers within ‘userSlice’ to the key of ‘user’ in the store's reducers.

The last step to complete is to ensure the entire application has access to the Redux store. We can achieve this by importing ‘Provider’ from ‘react-redux’ and wrapping our main application component, with the ‘Provider’ component, in our ‘index.js’ file.

In this code snippet, ‘Provider’ is wrapped around the ‘App’ component and ‘store is passed as a prop to the provider component. This grants access to the Redux store throughout the entire application. Every component defined within ‘App’ or any children of ‘App’ will have access to anything defined in the Redux Store.

Global State Achieved!

Now that our Redux setup is complete, accessing and updating a specific slice of the applications state becomes fairly easy and straightforward. For example, if we wanted to update the state of our user upon initialization of the application, we could do the following:

In this code snippet, we imported ‘useDispatch’ and ‘useSelector’ from ‘react-redux’, which give us the necessary tools to dispatch actions and select a specific portion of the applications state. Additionally, we’ve also imported ‘setUser’ which corresponds to our ‘setUser’ reducer that was defined earlier in the ‘userSlice’.

When the application is initialized (triggered by the empty dependency array in ‘useEffect’), the ‘dispatch’ function dispatches the ‘setUser’ action with the ‘sampleUser’ object passed into it, therefore, updating the state of the user. The ‘useSelector’ fetches the ‘user’ state from the Redux store allowing us to display the user information to the web page.

At first glance, the steps involved and time spent just to do something as simple as setting the user upon the app's initialization, may seem extensive. However, this example is just a simplified explanation showing how easy it is to interact with the Redux store to select or update specific portions of your applications state. Having everything neatly organized and easily accessible will streamline your ability to manage the global state of the application. With Redux, even as your application grows and becomes more complex, maintaining and modifying state is as easy as ever.