useReducer with useContext Part 1

CodeSandbox Links

You can find the starter project for this tutorial at https://codesandbox.io/s/usereducer-hook-starter-wl8gc . You can also access the complete code of this tutorial, with styling, at https://codesandbox.io/s/usereducer-hook-swkwl.

Understand useContext

Before continuing, you'll need to have a basic concept of the useContext hook. Head over to the useContext section of this handbook to learn more about it. In short, useContext is a hook used to save a state globally, available across the entire application.

Understand useReducer

The useReducer is a hook that allows us to manage complex state logics. If you've used Redux before, the concept of useReducer is pretty similar to Redux. A reducer basically a switch statement defining all the possible actions a context can perform, and only updating the part of the global state related to that action. Now, let's create a useContext hook, using useReducer , with the example of an online shopping website.

Starter Project

For this project, I already created a starter project that you can find at https://codesandbox.io/s/usereducer-hook-starter-wl8gc . If you take a look at it, you'll see that we have a Router in App.js , that links to two different pages: a Products page as well as a Cart page. In the Products component, we are iterating over the shopData array from the ShopData.js file. For each item, we're displaying a ProductCard .

In the Cart component, we're only displaying a hard-coded text for now with the total price of the cart.

We'll be updating this project, so I encourage you to fork that CodeSandbox and we'll create a useContext with useReducer on top of it.

Create the context

Now, we'll need to create a context. This context will allow us to access the elements the user added to their cart across the entire application. First, create a ShopContext.js file. We'll import createContext from the React library.

// ShopContext.js

import { createContext } from "react"

Below that, we'll use the createContext function and, as the name implies, create a context. Let's save it in a ShopContext variable.

// ShopContext.js

const ShopContext = createContext();

If you hover over createContext , you'll see that it needs a default value. Let's create the initial value of our context in a shopReducer.js file. We'll need two global states: a total , which will be the total price, and an array of products the user added to their cart. Remember to export that initialState , as we'll need it in ShopContext.js.

// shopReducer.js

export const initialState = {
  total: 0,
  products: []
};

Let's import the initialState in ShopContext.js and pass it as an argument to the createContext function.

// ShopContext.js

import { initialState } from "./ShopReducer";

const ShopContext = createContext(initialState);

Create the reducer

Now that we have the context, we'll create the reducer. In shopReducer.js , right below our initialState, we'll add the following function. It's our reducer, which requires two arguments: a state , which will be a state object, containing the same key-value pairs as our initialState , and an action , which will be an object containing a type of action and a payload . Don't forget to export default the reducer.

// shopReducer.js

const shopReducer = (state, action) => {

}

export default shopReducer

Inside of the reducer, we can extract the type and the payload from the action.

// shopReducer.js

const shopReducer = (state, action) => {
	const { type, payload } = action
}

As mentioned above, a reducer is a switch statement is defining all the possible actions a context can perform, and only updating the part of the global state related to that action. Let's add a switch statement in our reducer. The switch statement will evaluate the type of action provided by the context.

// shopReducer.js

const shopReducer = (state, action) => {
  const { type, payload } = action

	switch (type) {

	}
}

Inside of the switch, let's define a few actions. By convention, each type should be a string, all in uppercase, and each word should be separated by an underscore. This writing format is called SCREAMINGSNAKECASE . For the moment, we'll print the action type as well as the payload on the console. For each case in the switch statement, we'll return the rest of the state, with the updated products or total, depending on the action.

// shopReducer.js

const shopReducer = (state, action) => {
  const { type, payload } = action;

  switch (type) {
    case "ADD_TO_CART":
      console.log("ADD_TO_CART", payload);

      return {
        ...state,
        products: payload.products
      };
    case "REMOVE_FROM_CART":
      console.log("REMOVE_FROM_CART", payload);

      return {
        ...state,
        products: payload.products
      };
    case "UPDATE_PRICE":
      console.log("UPDATE_PRICE", payload);

      return {
        ...state,
        total: payload.total
      };
  }
};

By default, we'll throw an error if the switch statement can't find the type of action provided by the context. It's important to note that this error thrown is for the developer, and shouldn't be seen by the end user. In other words, developers should make sure that all action types are taken care of in the switch statement of the reducer, to prevent any error being thrown to the end user.

// shopReducer.js

const shopReducer = (state, action) => {
  const { type, payload } = action

	switch (type) {
		// Switch cases here...
    default:
      throw new Error(`No case for type ${type} found in shopReducer.`);
  }
}

Upcoming

We coded our reducer! That was easy, wasn't it? In the second part of this three-part tutorial, we'll create our provider and our useContext hook. The context is what will allow us to save the total and the products array states globally. See you in the next section !