Hooking it up with Redux

For anybody who has set up Redux in React you know that it is a great state management tool that can be a pain to begin. The boilerplate provided does not provide a clear path for the data flow of your application. When all is said and done you you feel left asking “Isn’t this supposed to make my life easier?”

Well, like most of us, I enjoy the simplicity the hooks provide us with. So why haven’t more of us been adapting the use of hooks like useSelector and useDispatch. So let’s dive into how to use these hooks with alittle practice.

First the basics:

After installing Redux and React-Redux inside your root project directory, import and write the following code into index.js

These three imports are going to serve as the connection between our application and Redux.

Provider will serve as the component bridge between the Redux store and our entire app, so we are going to wrap the App component with this component provided to us from the react-redux library.

This component will have a property called store and the value of this property is going the be the entire Redux store contained inside a variable also called store, and is going to be equals to the function createStore , also from react-redux library, that will accept a reducer as an argument.
We are going to be in charge of creating the reducer, which is nothing more than a function that takes two arguments: The current state and the action, returning the new state.

The parameter currentState needs a default value equals to the initial structure of the store, and for that, we are going to create an object called initialState and assign it as the default value of currentState.

Let’s first define what an action is.

An action is just an object that always contains the type of logic that is going to be executed on the state and the payload or data that is coming from the action.

By having an idea of how the action will look like, we can start writing the logic inside our reducer by using a switch statement in order to make our code look cleaner. This way, we can insert both the current state and the action in the reducer function and the logic should look something like this.

So how do we incorporate these fancy hooks.

Let’s start by importing useSelector from the react-redux library. useSelector is a function that takes the current state as an argument and returns whatever data you want from it. It’s very similar to mapStateToProps() and it allows you to store the return values inside a variable within the scope of your functional components instead of passing down as props.

Now let’s try to dispatch an action to the store by importing useDispatch.

Similar to useSelector, useDispatch is a function that we import from react-redux library and assign it to a variable. useDispatch allows us to dispatch any action to the store by simply adding an action as an argument to the new variable like the code above.

Just like that you are set up to add this syntax to every functional component that needs to either read data from the state or dispatch an action to it. The end product is cleaner and easier to manage.