Using Redux toolkit: A step-by-step guide
Hey Guys, Hope you all are doing well. Have you ever sat down on a fine day and thought “Alright! lets learn redux” and to only later see all the boilerplate and think.. “Ohh man., Why is it so much boiler plate required to just emit some data to the central store and to get the updated data”? Yeah I was there and I can feel all what you have to say.
Well, turns out you don’t need all the additional boilerplate code to start with the redux. Let me tell you about the redux toolkit. Redux toolkit is there mainly to do two things
- Reduce boilerplate code
- Set up store for the central stage management easy.
Follow me where I show you the easy step-by-step process and how you can get your project up and running with just 6 steps.
Step 1: Install the redux toolkit package
To install this package you have to run the command in your project path
“npm install @reduxjs/toolkit”
Now redux toolkit is installed in your project. Lets move to the next step.
Step 2: Implementing createslice()
So, creating a slice is simple, it has three things
- Slice name
- Initial state
- Reducers
CreateSlice can be imported from the “@reduxjs/toolkit”
Here I have named my slice ‘usersdata’. I have an object as initial data with two properties mode(Dark or Light mode),usersArr(users data). I have given some initial data to begin with in the initialState property of the createSlice.
In the reducers, we keep the actions . For these actions you will get state(existing state value) and action(contains what all data you have emitted) as parameters. You can change the state to a new value based on what you want.
In the above image, I want the createUser action to push the data that I am sending to the existing array of the users, So,, that is what I have done.
Step 3: Exporting actions and reducers from this file.
The “usersSliceFunc” now contains two keys. “actions” and “reducer”.
We can take out both from the usersSliceFunc.
And export the respective actions from that “actions” variable.
Also export default the reducer of that slice
Step 4: Provide the store at the topmost hierarchy of your code(Making store available to the entire app)
The store can be created by using configureStore from the redux toolkit. To the configureStore, pass the reducer as the reducer that we have default exported from the usersSlice file.
Now the result of that configure store is the store that you need to provide for the components that you want to use in. Generally that would be entire app. Give that as a store for the Provider tag from react redux.
Step 5: In the component you want to consume that data.. use “useSelector” hook and take the part of what you want to listen to the changes.
Like in the first two lines in the below attached image.
If you carefully see the image attached in the step 2, We have two parts that we are managing. Out of them we only want the usersArr part, so thats what we did.
Now that variables have the data you want to use and will update automatically whenever the data is modified.
Step 6: Change the data in the central state using useDispatch
In this we use the useDispatch hook like shown in the below image and the resulting function can be used to dispatch the actions.
To dispatch an action, here is a sample in which I am adding the new user to the central state to add this new user to the usersArr.
The createUser in the above image is the action that is being exported from the usersSliceFunc in step3.
So now the function related to the createUser in the reducers in the step2 will be executed and the usersArr will be changed and the new updated usersArr will be automatically updated to the component.
I am almost sure I didn't write this as clear as it is in my mind. I will keep editing it to make it as clear as possible.
Seems complex?? haha you should have seen the redux without the redux toolkit. Anyway I will be providing the code below(github link) .
Code: https://github.com/jaisaichand/reduxtoolkitmedium
Feel free to mail to t.jaisaichand4@gmail.com if anything in the article needs to be improved or corrected.
Keep Learning!! Keep Growing!!
references:
