A really simple way to use React-Redux in 2020
In this modern world of React, we as developers have a lot of options for state management tools, in this article, I’m going to explain why using Redux might be a good implementation over Context API and a simple way to implement it on your app using hooks, so you can reduce the amount of boilerplate on your code.
What is Redux?
According to the redux website:
“Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time-traveling debugger.”.
In that way, you can see why Redux is the common choice of most developers when creating medium to large applications, and that is one of the most popular state managers out there available for react developers.
What is Context API?
According to the React.js documentation:
“Context provides a way to pass data through the component tree without having to pass props down manually at every level.”
This option is simpler thanks that it already comes with React, the developer can use it without installing any type of package.
Now that you know about these two types of way of data-passing, why using Redux instead of Context can be simpler?
The short answer is that it won’t be as simple in a “less code” way or something, but with the new hooks syntax, it’s more “similar” as if you write your code using Context.
Installing the dependencies:
First, you will need to install 2 dependencies react-redux & redux, you can also install redux-thunk if you want but I will talk about it in another post.
(Little side note here, this tutorial can also work if you want to understand some basics of Redux and how to use it.)
Now, you need to create 2 new folders, your Actions, and Reducers folders.
Actions: “Actions are payloads of information that send data from your application to your store. They are the only source of information for the store.”
Reducers: “Reducers specify how the application’s state changes in response to actions sent to the store. Remember that actions only describe what happened, but don’t describe how the application’s state changes.”
Now that we have those folders created, it’s time to create our Store
Store: “In the previous sections, we defined the actions that represent the facts about “what happened” and the reducers that update the state according to those actions.”
And for doing so let’s go to the App.js and start the process of creating the store and wrapping the whole app under the provider
Now it’s time to create your Root Reducer, here is where you will handle all the reducers your app needs to work properly.
With your Root Reducer created, we only need 2 more things, our action and using those react-redux hooks for redux I told you about at the beginning of the post.
When you created your action, now go to the part of the app you will call for that action to be “dispatched” to the store,
Dispatch: “The dispatch() function can be accessed directly from the store as a store.dispatch(), but more likely you’ll access it using a helper like react-redux’s connect(). “
and then on top of the import “{useSelector, useDispatch}” from “react-redux”, this is what will make everything work nice and easy.
And that’s it! Now if you need to add more state to your store, add a reducer on your root reducer, create an action and then dispatch it when you need it! With hooks using Redux, it’s faster and easy to understand than how it was before.
