State Management with Redux Toolkit

Brief Analytic on Redux vs Redux Toolkit

Hi all,

Today I am here with such an interesting topic for all Tech enthusiasts outta there…

What is State Management?

Think you are doing a To-do Application. If you complete a task, then the process will be like this,

task(pending) -> task(completed)

Did you notice how the state changes above? In simple words, “Properly managing and tracking the change of the state of a component” is what we call State Management.

Above mentioned Example is a very simple one. But in large-scale applications, it is very difficult to track the state changes. This is where the Redux library came in.

Redux is a predictable state container for JavaScript Apps. It can be used with React, Angular, Vue, or even vanilla JavaScript.

Here we will mainly focus on ReactJS. The official Redux UI binding library for React is known as React-Redux.

How to use React-Redux in our application?

Installation

npm install react-redux

Think you are maintaining a pizza shop(store). You are selling pizzas(action) to the public. If a customer purchases a pizza from your shop, then the shopkeeper(reducer) will reduce one pizza from the count right.

This is how the React-Redux also performs the task.

There are three core concepts in React-Redux.

They are,

• A store that holds the state of your application.
• An action that describes the changes in the state of the application.
• A reducer that actually carries out the state transition depending on the action.

Assume that, you have created a JavaScript Application, and you need to update the state in Redux Store. To do that, the Application should be always subscribed to the Redux Store. However, the application cannot update the state directly.

If the application wants to update the store, then the application should emit the Action. We can call emit as dispatch (the term used in Redux).

When an action happens, Reducer will handle the action and update the current state (Redux Store).

Done…

Now Let’s Discuss how “Actions” work. It has a ‘type’ property that indicates the type of action being performed.

As shown in the above image, the function buyPizza will return the action type.

Next, let’s see how reducers perform.

As shown above, the reducer will accept two arguments, which are initial state and action.

With that information, it is reducing the count of the Pizza.

Now let’s see what happens inside the store. There are five responsibilities in a redux store.

• Holds application state
• Allows access to the state via getState()
• Allows the state to be updated via dispatch(action)
• Registers listeners via subscribe(listener)
• Handles unregistering of listeners via the function returned by subscribe(listener)

As shown above, the store will be created using the reducer (we have created), as an argument. Then it will access the state via getState method. When it performs the dispatch function, the store updates the state.

Interesting right?

Other than these, there are some more things like the redux-thunk concept and combined reducers concept. Redux-thunk will be used as a middleware to monitor the state changes. And Combined reducer concept will be helpful to combine multiple reducers.

We need to configure these things separately to perform the tasks.

So you guys can think that this kind of redux approach is a lot time-consuming and can be easily forgettable. Also, too much of packages to be installed. Sometimes writing codes for actions and reducers become more complex.

This is where Redux Toolkit came in.

Moving to Redux Toolkit

Installation

npm install @reduxjs/toolkit

This package includes Redux-thunk and Redux DevTools extension itself. Please visit the official documentation by clicking here, for more information.

First, we need to create and initialize the store.

As shown above, the configureStore replaces createStore of redux. ConfigureStore not only creates a store but also will accept all the reducers inside it. So no need to create a combined reducers class separately, to combine multiple reducers, as we did in redux.

Then we need to Provide Store in React Application.

So as shown above, we need to import store inside App.js, because every component of our application needs to access the store. We can use provider from the react-redux package to perform this task.

The next step is to write Reducers and Actions

In traditional Redux we wrote reducers and actions separately.

But with Redux Toolkit , we can create a slice file, named pizzaSlice.js. And inside that, we can implement both reducers and actions, as shown below.

As per the above code part, we need to import createSlice. Each case under the reducers becomes an action (increase, decrease).

Since we have created Slice with reducers. Now we can import it inside our store file as shown below.

Finally, we need to Dispatch the Actions from UI

In Redux we used store.dispatch(buyPizza()) to dispatch an action.

But here we are going to use useDispatch hook to dispatch actions and, useSelector to read data from the store.

For that, we need to import useDispatch and useSelector from react-redux, and the actions inside pizzaSlice.

Import { useDispatch , useSelector } from ‘react-redux’;

Import { increment, decrement } from ‘./pizzaSlice’;

Then our pizzaCounter function will initialize our two hooks and return UI elements with our dispatch(action) triggered when clicked.

Conclusion

As per the brief analytic, I hope that everyone got a clear idea about Redux and Redux Toolkit. Now a days it is very important to use a state management tool in our projects.

Redux-Toolkit is a great option when it comes to both beginners and developers who want to reduce the amount of boilerplate code in Redux. It makes the process easier to manage our project efficiently.

To get the Redux tool related codes, Please visit my GitHub Repository.

So, happy Coding. Bye!