Getting Started with Redux-js Toolkit
Hey there, Let’s first talk about the problem statement for Redux? What is Redux? And why do we use it? If you’re already familiar about Redux then you can go ahead and skip this explanation about Redux and directly fast forward to the explanation of reduxjs/toolkit library.
Explanation About Redux:
In React, if we would like to a pass value from one component to another component. We would pass them as props so that the child could access those values.
But what if we want to pass the values between two components who are totally independent of each other. As they are independent, we can’t use props to pass the values. So, how would we pass the values?
To solve this issue, Dan Abramov wrote the redux library. Later, Facebook acquired this open-source library and now manages this library.
Now, we have two components who would like to talk with each other. In Redux, we have a concept called Store. By the help of the Store, the components can talk with each other (When I Say, talk to each other. It means to share data between themselves.).
For Easy Understanding, think of the store as a single hook which can be used by all the components.
First, the Independent Component A is going to provide some data to the store. As soon as the store is updated with the data. The Independent Component B can access that data and it is vice versa with Component B. Similar to a hook, as soon as the value is updated in the store. Component B is going to re-render with the new changes provided by component A. That’s pretty much the 1000 feet overview of the redux concept.
There are mainly four important things in Redux and they are store, actions and reducers and dispatchers.
Store:
As the name suggests, it does nothing but stores the data/values in it. The components can ask the store to get the values from it.
Think of store as a dumb guy, who just follows orders from reducer and updates the values provided from them without any question.
Actions:
As I above talked about Independent Component A, providing data to the Store. In redux, we cannot directly update the store. we have to use an action for updating it. Actions take the data and type of update we would like to perform and send it to the reducer. That’s pretty much the role of the Action in Redux.
Think of these guys as who do all of the hard work, they handle the data provided by the components and send it to the reducer.
Reducer:
Reducers are just pure functions, and they don’t contain any sort of logic. They just tell the store how to update the data. Either store the new data with the previous data already present in the Store or replace the previous data with the new Data.
These guys don’t do any sort of hard-work such as actions but, still, steal the spotlight from them. Because there are the only one’s who can communicate with the store.
Dispatch:
The Independent Component A cannot directly trigger the action as a normal function. It has to use a dispatcher, only by using a dispatcher we can call an action.
Think of these guy as a phone, our Independent Component A cannot directly call an action. They have to use dispatch to call the action similar to a mobile phone.
So this is how the whole structure works, the Independent Component A is going to call(dispatch) a specific action with the data, the action is going to take the data(payload) and type of action and call the reducer. Based on the type of action, the reducer is going to update the store. Once the store is updated. As the Independent Component B, is listening to any sort of updates from the Store. The component is going to re-render themselves as soon as there is an update.
Explanation About Redux JS Toolkit:
Redux is a great library for managing the state across the components but setting up and understanding the structure and flow is a little bit difficult and confusing for the beginners. Don’t get me wrong, Redux is an awesome thing once you clearly understand the flow. As stated on the website of reduxjs/toolkit, these are some of the issues with the react-redux library.
- “Configuring a Redux store is too complicated”
- “I have to add a lot of packages to get Redux to do anything useful”
- “Redux requires too much boilerplate code”
To overcome these issues, we have reduxjs/toolkit. This library makes life much easier. The reduxjs/toolkit makes the configuring of the Redux very simple and straightforward. Guess what; this library comes with built-in support for the redux-devtools(this library is used for debugging the Redux store and watch the changes in the store.).
The above code is used for the configuring the Redux store using the reduxjs/toolkit. We will be providing the reducers, middleware inside the configureStore. Now, let’s talk about how we can create actions and reducers in this library.
Previously before the reduxjs/toolkit library, we would write actions independently and send the data over to the Reducer who would update the store. Now in the reduxjs/toolkit, rather than writing actions and reducers separately, we combine both of them and call them as Slices. One Slice can contain multiple actions and reducers. So, it’s very easy to deal, manage and debug both the actions and reducers.
Below is an example of a sample slice. Let’s take a look at an example of a counter slice; we would like to increment and decrement the counter. The slice contains the name, initialState and reducers.
The redux store is immutable, so we cannot directly update the data in the store previously. But, in the reduxjs/toolkit library, we can directly mutate the data in the reducer and internally the immutable js library makes it into an immutable object and provides it to the store to update itself.
As I said above another one of the great things about the reduxjs/toolkit is we don’t have to setup redux-devtools to debug the redux store. The reduxjs/toolkit internally has the redux-devtools built into it. So, the only thing we have to do is install the redux devtools plugin in the browser and that’s it. We can get pretty much started with the debugging of the application.
This is just an overview of what you can do with the reduxjs/toolkit. Go ahead and take a look at the reduxjs/toolkit website. It contains more examples and much more info about the reduxjs/toolkit. Thanks
