How to Manage React State with useReducer() and Context API

React is the most popular framework in 2020 for Front-end development. The reason behind React’s success is short learning curve and how fast it can get your App up and running. But there is one concept in React that most developers struggle to wrap their head around aka State Management.

Libraries like Redux, MobX are built around React to handle the state but they can be intimidating to learn for a new and upcoming developer. In this article I am going to explain how you can manage a state using React’s inbuilt Context API and Hooks. Once you master the concepts of State Management using React’s inbuilt features, it will save you a lot of pain when you learn Redux.

What is State Management?

Beginning from React 16.8, every React component, both class and functional ones, can have a state. To put it simply, State is a JavaScript object that represents the components Memory. It can be changed anytime as a result of users actions or events. State can be passed down the component tree in a process called props drilling.

As the app gets bigger it becomes more and more difficult to manage state and props drilling makes it harder to keep track of all dependencies. A better solution is to simply separate the state from the app using Context API and then share it where it is needed.

State Management using Context API

What is Context API?

I explained the Context API with an example in my article here: How to use Context API in React

Context API is designed to share state across the entire React component tree. Using Context API you can share a state to the entire “App” component tree without having to pass it as props at each level. You can then manipulate the state in the “User Info” component directly without having to pass it through the intermediate “Users” component.

What is useReducer() hook?

A useReducer() hook accepts a reducer and initial state and outputs current state with a dispatch method. The current state is the updated state. That’s basically it!!

What is a Reducer?

Reducer is a function that takes 2 parameters, which are action and initialstate(payload) and outputs the new state(current state) based on the action performed. You can access your reducer using the useReducer() hook.

Implementation

Now that we have a basic understanding of what a Reducer, useReducer() and Context API is, lets built a simple Application to solidify the concepts. In this application, we will create a simple counter and we will store the value of the counter using Context API. What’s important here is to understand the concepts behind state management even if you don't understand every line of code.

Let’s being our build with npx create-react-app.

npx create-react-app counterapp

Step 1: Build the DataLayer.js

DataLayer.js it where we are going to create our Context and then export it out to be used by other Components in the App.js tree. Firstly, we will create a context called DataLayerContext. This context stores our state. We can import it into child components to use and manipulate the state later.

const DataLayerContext = React.createContext();

Next will create a function DataLayer that takes initialstate, reducer and children as parameter. DataLayerContext.Provider is just a wrapper that shares the state with all the child components. Most likely, this piece of code wont make sense to you right now. But don’t get discouraged because once you start identifying the patterns, State Management will become super simple. For now, just copy and paste this code into your project.

export const DataLayer = ({ initialstate, reducer, children }) => (
<DataLayerContext.Provider value={useReducer(reducer, initialstate)}>
{children}
</DataLayerContext.Provider>
);

Now that our Context is created, it is time to export so other components can use it.

export const useDataLayerValue = () => useContext(DataLayerContext);

Step 2: Initialstate and Reducer — Reducer.js

To manage a state, first we need to create one. We will call our state initialstate. It will have one property “data” whose value is set to 0.

export const initialState = {
data: 0
};

Next we create our Reducer. As mentioned above, Reducer is just a function that takes 2 parameters, which are action and initialstate(payload) and outputs the new state(current state) based on the action performed.

In case of our reducer, if the action is “INSC”, the reducer will update our state and increment the value of data property by 1. If the action is “DESC”, it will decrement the value of data property by 1. Pretty straight forward!!!

export const reducer = (state, action) => {
switch (action.type) {
case "INSC":
return { ...state, data: state.data - 1 };
case "DESC":
return { ...state, data: state.data + 1 };
default:
return state;
}
};

Step 3: Wrap the App component with DataLayer.

With the reducer, DataLayer and initialstate ready, it is time to pass the state to the App component tree. We do that by wrapping the App component with DataLayer in the index.js file. Now every component in the App.js component tree will have access to the state. BOOM!!!!

import React from "react";
import ReactDOM from "react-dom";
import { DataLayer } from "./Datalayer";
import App from "./App";
import { initialState } from "./Reducer";
import { reducer } from "./Reducer";
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<DataLayer initialstate={initialState} reducer={reducer}>
<App />
</DataLayer>
</React.StrictMode>,
rootElement
);

Step 4: Access and modify the state in App.js component

App.js component
import { useDataLayerValue } from "./Datalayer";

We can access the state property “data” using the useDataLayerValue().

const [{ data }, dispatch] = useDataLayerValue();

Finally, we will modify the value of the state using 2 buttons. Button “+1” fires a dispatch with action type “INSC” — increment the value of data by 1 and update state. Button “-1” fires a dispatch with action type “DESC” — decrement the value of data by 1 and update the state.

<button onClick={() => dispatch({ type: "INSC" })}>-1</button>
<button onClick={() => dispatch({ type: "DESC" })}>+1</button>

Our counter app is now complete. I hope my simple State Management tutorial helped you understand one of the most core concepts of React and Web Development. The entire code can be found in the Sandbox here.

Like to App: csb-t7eux-qq7eque4t.vercel.app

Happy Coding!