Using React Hooks in Redux Application

Most developers don’t like redux for so many reasons , but the introduction of react hooks in react 16.8 will some how reduce the pain of using redux .

Among the biggest pain is the wiring that needs to happen when you want to connect a component to the redux store , all these Higher-Order Component usage , the connect , mapStateToProps and mapDispatchToProps make it quite cumbersome .

Let’s begin , we are going to create a ToDo Application in which you can add a todo , toggle the state of a task as well as delete a todo .

Screenshot of what we will be building

The Final code for this tutorial can be found here https://github.com/robertrutenge/todo-redux-hooks

Let’s Start . We are going to use create-react-app to bootstrap our new application , let’s call it todos

create-react-app todos

Let’s cd to our application and start it by running

npm start

We are going to use bootstrap to give some styling to our components , so let’s install it first ;-

npm install bootstrap

Let’s start with the easy stuffs first , creating our components , on our todo application we are going to have 2 components , one for inputing new todo item and another one to display the list of todos together with an option of marking wether a task is complete or not and another option to delete a todo .

Delete everything on App.js file and add the two components . Don’t forget to add bootstrap.css file in the index.js file or app.js file .

Let’s go ahead and create the two components . Under the scr folder , create a new components folder with two files ToDoInput.js and ToDoList.js .

ToDoInput.js File

ToDoList.js File

The code above , should be straightforward , and it should give something like below :

Since , we will be using redux as our state management library , lets go ahead and install redux and react-redux .

npm install redux react-redux

Once Installed , Let’s create our redux store , go on and create store folder inside it , index.js file with the code below :

The createStore() function from redux will need a reducer , so let’s go on and create a reducers folder inside store folder and inside it , index.js file with the below code :

As we all know in redux , the only way to communicate with our store is through action , so let’s go on and add our action creators . Inside store folder create actions folder and inside it , index.js file .

Now we should be good to go with the redux part , the only missing part is connection the store to our application . We will do that by using a Provider from react-redux . Let’s change our App.js file by wrapping it with our provider and supplying the store we just created .

Finally , we manage to connect the store and everything should work as expected . If you have Redux Dev Tools installed , and inspect our application , you should be able to see our store with a todos empty array as below :

Now , on to the final part . Using React Hooks to our redux application . Hooks allow access of state and lifecycle methods in stateless / functional components . Since react-redux v7.1.0 , some hooks APIs have been introduced as an alternative to HOC connect() function that’s normally used when you want to connect to the store .

The most used react redux hooks APIs are useSelector() that allows the access of our redux store data and useDispatch() that returns a reference to the dispatch function .

We will use the two APIs for adding , toggling and deleting our todos .

Let’s start with adding todos , let’s change our <ToDoInput /> . Before that make sure you install uuid which we will use to generate a random id .

npm install uuid

So , explaining what happened above . We first use useState hook from react for storing our state which is todo . setToDo is the same as this.setState() method in stateful component and it does just That .

Note that , useState() passed a parameter that defines initial state , and in this new hook implementation the state does not necessarily needs to be an object compared to the stateful component implementation . In our case its an empty string .

So , on the input we have added the value property that will hold the current state , and the onChange method that will use setTodo() to change the value of our state .

The onSubmit method calls the submit function that will in turn calls addToDo method that will use UseDispatch() hook from react-redux to dispatch an action in our case addToDoAction() .

If all goes well , you should be able to add your todo with no error and when inspect in our redux store you should see the newly added todos .

Displaying the todos

Now let’s finalize our application , by displaying the todos and adding functionality to toggle the state of the todo task as well as delete the todo .

Modify <ToDoList/> component as below :

From the above implementation , useSelector hook was used to get the current state in our store for our todos . The useSelector is equivalent to mapStateToProps argument in the connect function .

The toggle and delete actions should be as the addToDo we saw earlier .

Once you start to use the hooks , you will start to realize how efficient and effective they are . Remember the hooks did not come to replace anything , so no need to rewrite your projects to use them , you can just introduce them in new development as they don’t have any breaking changes .