How To Create A Shopping Cart In Next.Js With Context And Usereducer

In a Next.js e-commerce app, you can use the Context API and the useReducer hook to create a cart. The context API simplifies sharing of cart data between components while useReducer handles the cart state.

Creating the Product Page

In the pages folder, create a new file called Product.jsx that renders a single product.

The product component accepts the ID, name, and price of a product and displays it. It also has an “Add to Cart” button.

When a product is already added to the cart, the button should switch to a “remove from cart” button and if a product is not in the cart, the page should display the “Add to cart” button.

To implement this functionality, you’ll need to keep track of the items in the cart using the context API and the useReducer hook.

Creating a Shopping Cart Using the Context API

The context API lets you share data across different components without having to pass props down manually from parent to child. These components can be the navigation bar, the product details page, or the checkout page.

Create a new file called cartContext.js in a folder called context and create the context.

CartContext takes an array of items as the default value.

Next, create the context provider. A context provider allows components that consume the context to subscribe to context changes.

In a new function called cartProvider, add the following:

To keep track of the items in the cart, you’ll use the useReducer hook.

The useReducer hook works like the useState hook except it helps manage more complex state logic. It accepts a reducer function and the initial state. It returns the current state and a dispatch function which passes an action to the reducer function.

Create a new function called CartReducer and add the reducer.

The reducer function comprises a switch statement that updates the state depending on the type of action. The cart reducer function has “ADD” and “REMOVE” actions that add to the cart and remove from the cart respectively.

After creating the reducer function, use it in the useReducer hook. Start by creating the CartProvider function. This is the function that’ll provide the context to other components.

Then, create the useReducer hook.

The dispatch function is responsible for updating the cart state, so modify the CartProvider function to include functions that dispatch products to the useReducer hook when the cart updates.

The addToCart function appends the new product to the existing products and returns the updated products in the payload object of the dispatch function. Likewise, the removeFromCart function filters out the item by ID and returns the updated list.

You also need to return the value prop in the CartContext provider.

The value prop is consumed via the useContext hook.

Consuming the Cart Context

So far you’ve created the cart context and created a useReducer function that updates the cart. Next, you’ll consume the cart context in the product component using the useContext hook.

Start by wrapping index.js, the top component, with the context provider to make the context values available across the whole application.

Then import the useContext hook and the cart context provider in Product.js

The button function depends on whether the item is already in the cart. If an item exists in the cart, the button should remove it from the cart and if an item is not already in the cart, it should add it. This means you have to keep track of the state of the item using useEffect and useState. The useEffect code checks whether the item is in the cart after the component renders while useState updates the state of the item.

Now, use conditional rendering to show the button based on the exists state.

Note that the onClick handler functions are the removeFromCart and addToCart functions defined in the context provider.

Adding More Functionality to the Cart

You’ve learned how to create a shopping cart using the context API and the useReducer hook.

Even though this guide only covered add and remove functionality, you can use the same concepts to add more features like adjusting the quantities of cart items. The crucial thing is understanding the context API and how to use hooks to update the cart details.