React Hooks tutorials for beginners-8

Image for post
Image for post
React

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

In the previous part, we had created a different state variable to do basically the same functionality in in second counter. There is an easier alternative to do it and we will see it first.

Create a new file CounterThree.js in the components folder. The content of it is similar to CounterOne.js, except the one which are highlighted below.

Here, we are creating a new count2 and dispatch2 with the same reducer logic. After that we are using them to create three new buttons with same logic.

Image for post
Image for post
CounterThree.js

Now, include this in App.js file.

Image for post
Image for post
App.js

Now, in localhost both will work and independent of each other.

Image for post
Image for post
Both independent

Till now we had used useReducer to do local state management. But the real power of it comes with global state management like redux. We do it with combining useContext with useReducer.

To understand this with an example, we will again create a deep level of nesting.

First from App.js import three components GrandParent1, GrandParent2 and GrandParent3.

Image for post
Image for post
App.js

Next, let’s create GrandParent1.js file with below content.

Image for post
Image for post
GrandParent1.js

Next, we will create GrandParent2.js file with Parent1 component.

Image for post
Image for post
GrandParent2.js

Next, we will create GrandParent3.js file with Parent2 component.

Image for post
Image for post
GrandParent3.js

Now, we will create the Parent1.js file with below content.

Image for post
Image for post
Parent1.js

Next, we will create Parent2.js file with the Child1 component.

Image for post
Image for post
Parent2.js

Lastly we will create the Child1.js file with below content.

Image for post
Image for post
Child1.js

Now, our goal is to maintain a count state in App.js and modify the state from different Components.

We will update our App.js to have the reducer logic for a simple count, which we had learned earlier. After that we are wrapping the jsx with CountContext and passing the count and dispatch as an object.

Image for post
Image for post
App.js

Now, it’s time to use it in components which are nested at different level. We will first update GrandParent1.js file. Here, we are just importing the CountContext and then using both the countState and the countDispatch. The button trigger from here, will run the reducer logic in App.js file.

Image for post
Image for post
GrandParent1.js

Next, we will update the same logic in Parent1.js file.

Image for post
Image for post
Parent1.js

We will also update the same in Child1.js file.

Image for post
Image for post
Child1.js

Now, we have a global state which can be updated by any component and the state variable can also be accessed by any component. This is a complete implementation of Redux, but in a much simpler way,

Image for post
Image for post
Gif

This completes part-8 of the series. You can find part-9 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