Advanced State Management with useContext and useReducer in React: Building a Global Shopping Cart
In the previous article, we introduced the concept of combining useContext and useReducer to manage global state effectively in a React application. We demonstrated this by building a simple to-do list. Now, we’re going to take things up a notch and apply these concepts to a more complex, real-world example—a global shopping cart.
This guide will cover how to manage multiple states and actions, such as adding, updating, and removing items, and calculating totals—all while keeping the application scalable and performant.
In this second part, you’ll learn to:
-
Handle more complex states using
useReducer. - Create a flexible context provider to manage state and actions globally.
- Implement advanced reducer functions to perform calculations and handle various types of actions.
- Optimize component performance with memoization for better performance.
Let's dive in!
Project Overview: A Global Shopping Cart
Our shopping cart application will have:
- Product List: A set of items available to add to the cart.
- Cart Functionality: Users can add, update, and remove items in the cart.
- Cart Totals: Calculate and display the total items and the total price.
We’ll start by setting up the context and reducer, then build components to showcase the features.
Setup and Initial Files
To get started, initialize your React project and set up a basic folder structure:
src/
├── CartContext.js
├── CartProvider.js
├── ProductList.js
├── Cart.js
└── App.js
Step 1: Create the Initial State and Reducer
We’ll start with an initial state that represents an empty cart and a set of sample products.
Initial State:
// Initial state structure
const initialState = {
products: [
{ id: 1, name: "Product A", price: 30 },
{ id: 2, name: "Product B", price: 20 },
{ id: 3, name: "Product C", price: 50 }
],
cart: [],
totalItems: 0,
totalPrice: 0
};
Reducer Function:
We’ll set up a cartReducer function to handle various actions such as adding items, updating item quantities, removing items, and calculating totals.
function cartReducer(state, action) {
switch (action.type) {
case "ADD_TO_CART": {
const item = state.cart.find(item => item.id === action.payload.id);
const updatedCart = item
? state.cart.map(cartItem =>
cartItem.id === item.id
? { ...cartItem, quantity: cartItem.quantity + 1 }
: cartItem
)
: [...state.cart, { ...action.payload, quantity: 1 }];
return { ...state, cart: updatedCart };
}
case "REMOVE_FROM_CART": {
const updatedCart = state.cart.filter(item => item.id !== action.payload);
return { ...state, cart: updatedCart };
}
case "UPDATE_QUANTITY": {
const updatedCart = state.cart.map(item =>
item.id === action.payload.id
? { ...item, quantity: action.payload.quantity }
: item
);
return { ...state, cart: updatedCart };
}
case "CALCULATE_TOTALS": {
const { totalItems, totalPrice } = state.cart.reduce(
(totals, item) => {
totals.totalItems += item.quantity;
totals.totalPrice += item.price * item.quantity;
return totals;
},
{ totalItems: 0, totalPrice: 0 }
);
return { ...state, totalItems, totalPrice };
}
default:
return state;
}
}
Explanation
-
ADD_TO_CART: Adds an item to the cart, increasing the quantity if it already exists. -
REMOVE_FROM_CART: Removes an item based on its ID. -
UPDATE_QUANTITY: Updates the quantity of an item in the cart. -
CALCULATE_TOTALS: Calculates the total number of items and the total price of the cart.
Step 2: Create Context and Provider
Now, we’ll create a context and provider to pass our state and dispatch function globally. This will allow all components to access the cart state and actions.
CartContext.js
import React, { createContext, useReducer } from 'react';
export const CartContext = createContext();
export function CartProvider({ children }) {
const [state, dispatch] = useReducer(cartReducer, initialState);
return (
<CartContext.Provider value={{ state, dispatch }}>
{children}
</CartContext.Provider>
);
}
Step 3: Building the Components
With the provider and context set up, we can now create components for the Product List and the Cart.
ProductList Component
The ProductList component will display a list of available products and allow users to add products to the cart.
ProductList.js
import React, { useContext } from 'react';
import { CartContext } from './CartContext';
function ProductList() {
const { state, dispatch } = useContext(CartContext);
const handleAddToCart = (product) => {
dispatch({ type: "ADD_TO_CART", payload: product });
dispatch({ type: "CALCULATE_TOTALS" });
};
return (
<div>
<h2>Products</h2>
<ul>
{state.products.map(product => (
<li key={product.id}>
{product.name} - ${product.price}
<button onClick={() => handleAddToCart(product)}>Add to Cart</button>
</li>
))}
</ul>
</div>
);
}
export default ProductList;
Cart Component
The Cart component displays items in the cart, allows updating quantities, removing items, and shows the total items and price.
Cart.js
import React, { useContext } from 'react';
import { CartContext } from './CartContext';
function Cart() {
const { state, dispatch } = useContext(CartContext);
const handleRemove = (id) => {
dispatch({ type: "REMOVE_FROM_CART", payload: id });
dispatch({ type: "CALCULATE_TOTALS" });
};
const handleUpdateQuantity = (id, quantity) => {
if (quantity < 1) return;
dispatch({ type: "UPDATE_QUANTITY", payload: { id, quantity } });
dispatch({ type: "CALCULATE_TOTALS" });
};
return (
<div>
<h2>Cart</h2>
{state.cart.length === 0 ? (
<p>Your cart is empty</p>
) : (
<ul>
{state.cart.map(item => (
<li key={item.id}>
{item.name} - ${item.price} x {item.quantity}
<button onClick={() => handleRemove(item.id)}>Remove</button>
<input
type="number"
min="1"
value={item.quantity}
onChange={(e) => handleUpdateQuantity(item.id, parseInt(e.target.value))}
/>
</li>
))}
</ul>
)}
<h3>Total Items: {state.totalItems}</h3>
<h3>Total Price: ${state.totalPrice.toFixed(2)}</h3>
</div>
);
}
export default Cart;
Explanation
-
handleRemove: Removes an item from the cart. -
handleUpdateQuantity: Updates the quantity of a selected item. - Total Items and Price: The cart component displays the total items and price based on the calculated values in the state.
Step 4: Wrap the App with the Provider
To ensure all components can access the cart state, wrap the entire app in CartProvider.
App.js
import React from 'react';
import { CartProvider } from './CartContext';
import ProductList from './ProductList';
import Cart from './Cart';
function App() {
return (
<CartProvider>
<div className="App">
<ProductList />
<Cart />
</div>
</CartProvider>
);
}
export default App;
Final Touches: Memoization and Optimization
As your application grows, optimizing performance is essential. Here are a few tips:
-
Memoize Components: Use
React.memoto prevent unnecessary re-renders of components that depend on state. - Separate Contexts: Consider separating product and cart contexts if they become too large, allowing more targeted state updates.
Recap and Conclusion
In this advanced guide, we used useContext and useReducer to manage a global shopping cart. Key takeaways include:
-
Complex State Management:
useReducersimplifies managing complex actions and calculations. -
Global State with
useContext: Makes state accessible across the component tree. - Scalable Patterns: Separating state and actions in contexts allows for cleaner, more modular code.
Try applying this approach to your projects, and see how it improves the scalability and performance of your applications. Happy coding! 🚀
Top comments (0)