How to Use ‘useReducer’ and ‘useContext’: React Hooks Tutorial

Published in

JavaScript in Plain English

3 min readAug 23, 2021

I have been searching for a perfect tutorial or material for learning React hooks, i.e., useReducer and useContext. But I found nothing useful. So I worked for some time and created the content for all of you.

In this tutorial, we are going to use useReducer and useContext to maintain a global state which is available through the entire project and the state variables can be altered from any of the child components.

Most of us know that context API can be used to maintain a global variable that will available throughout the entire code.

And then reducers are used to maintain a state and have a dispatch method to change the state.

Let's combine both of these by sending the state and dispatch method through the context so that the state and dispatch method will be available through all the components and the state can be used and altered which is mentioned in the reducer.

Code

Let us get into the code

I have created a cart with add to cart feature and altering the quantity and the code for this is given below.

Creating the state and reducer

This is the initial state I have created with the items array in it. It contains the items I have selected.

Creating the reducer with methods:

2.Creating context and combining reducer along with it

I have created a context named Usercontext and initialized the reducer which returns the state and dispatch method. I have sent the state and dispatch method through the context.

3.using the state and dispatch method in child components

This is the child component where I used the useContext hook with the Usercontext as the parameter. Here I can use the state and dispatch method which can change the global state provided in the reducer.

Another component