React Hooks tutorials for beginners-7

Image for post
Image for post
React hooks

Welcome to part-7 of the series. You can find part-6 here. We will learn about useReducer hook in this part.

It is mainly used for state management. The code and the logic is similar to reducers used in Redux.

We will learn with an example. So, go ahead and create a new react project with the below command.

npx create-react-app reducer-hook

We will implement an simple counter with useReducer hook. Create a new folder components inside src folder. Inside it create a file CounterOne.js and put the basic content in it.

Here, we have three buttons for increment, decrement and reset. In the useReducer, we need initialState and the reducer function. So, we will set the initialState to 0 and create a reducer function.

The syntax of the reducer function, is exactly similar to the redux counterpart. Here, we are passing the state and action as parameters. Inside a switch statement, we are incrementing, decrementing or resetting the state.

Image for post
Image for post
CounterOne.js

Similar, to useState the useReducer also returns a pair of values, which we can get hold of using array destructuring. We have a count and a dispatch method. This dispatch method allows us to execute the code corresponding to a particular action.

We are using the dispatch to send the action to the reducer function, with the respective value.

Image for post
Image for post
CounterOne.js

Now, we need to add the component CounterOne in App.js file.

Image for post
Image for post
App.js

Now, head over to localhost and the buttons works as expected.

Image for post
Image for post
Work as expected

We will implement the same counter with complex state and action, where both of them will be objects. So, it is quite similar to what we use in Redux.

Create a new file CounterTwo.js inside the components folder. It is almost similar to CounterOne.js, only the updated code is highlighted. We are basically changing both state and action to objects here.

Image for post
Image for post
CounterTwo.js

Now, include it in App.js and after that in localhost we will get the same output.

Image for post
Image for post
Same output

Now, the obvious question is the advantage of this pattern over the earlier pattern.

The first case which we will look on is to have a value action to increment or decrement with any value. So, we have a value key in the action object. We are creating two new buttons for the same.

Image for post
Image for post
First case

And now we can see all in action at localhost.

Image for post
Image for post
localhost

In the next case, we want to maintain two different counters. We are creating a new counter secondCounter in the initialState. Now, we have two new cases as increment2 and decrement2, which will use the secondCounter. Also notice the …state been returned in all case. This is required or else all the state variables, won’t be updated.

After that we are showing the new counter in the return and also created two new buttons for the new counter.

Image for post
Image for post
Two counter

Now, when we move to localhost, we can see the new counter in action.

Image for post
Image for post
Counter 2

This completes part-7 of the series. You can find part-8 here.

You can find the code for the same in this github repo.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store