Modern API Development with Spring 6 and Spring Boot 3 - Second Edition by Sourabh Sharma

Author:Sourabh Sharma
Language: eng
Format: epub
Publisher: Packt
Published: 2023-10-15T00:00:00+00:00

Writing the custom cart context

You can use the Redux library for centralizing and maintaining an application’s global state. However, you are going to use a Redux-like custom hook to maintain the state for the cart. This uses the createContext, useReducer, and useContext hooks from the React library.

You already know that createContext returns Provider and Consumer. Therefore, when you create a CartContext using createContext, it will provide CartContext.Provider. You won’t use Consumer, as you are going to use a useContext hook.

Next, you need a cart state (cartItems) that you pass to the value in CartContext.Provider so that it will be available in the component that uses CartContext. Now, we just need a reducer function. A reducer function accepts two arguments: state and action. Based on the provided action, it updates (mutates) the state and returns the updated state.

Now, let’s jump into the code and see how it turns out. Have a look at the following snippet:

import React, { createContext, useReducer, useContext } from "react"; export const CartContext = createContext(); function useCartContext() { return useContext(CartContext); } export const UPDATE_CART = "UPDATE_CART"; export const ADD_ITEM = "ADD_ITEM"; export const REMOVE_ITEM = "REMOVE_ITEM"; export function updateCart(items) { return { type: UPDATE_CART, items }; } export function addItem(item) { return { type: ADD_ITEM, item }; } export function removeItem(index) { return { type: REMOVE_ITEM, index }; } export function cartReducer(state, action) { switch (action.type) { case UPDATE_CART: return [...action?.items]; case ADD_ITEM: return [...state, action.item]; case REMOVE_ITEM: const list = [...state]; list.splice(action.index, 1); return list; default: return state; } } const CartContextProvider = (props) => { const [cartItems, dispatch] = useReducer(cartReducer, []); const cartData = { cartItems, dispatch }; return <CartContext.Provider value={cartData} {...props} />; }; export { CartContextProvider, useCartContext };

https://github.com/PacktPublishing/Modern-API-Development-with-Spring-6-and-Spring-Boot-3/tree/dev/Chapter07/ecomm-ui/src/hooks/CartContext.js

First, you have created a CartContext with a createContext hook. Then, you have declared a function that uses a useContext hook and returns the value field’s value declared in the CartContext.Provider tag.

Next, you need a reducer function that uses the action and state. Therefore, we first define action types such as UPDATE_CART and then write functions that return an action object that contains both the action type and argument value, such as updateCart. Finally, you can write a reducer function that takes state and action as arguments and, based on the passed action type, will mutate the state and return the updated state.

Next, you define a CartContextProvider function that returns the CartContext.Provider component. Here, you use the reducer function in useReducer hook, and in its second argument, you pass the empty array as an initial state. The useReducer hook returns to the state and dispatch functions. The dispatch function takes the action object as an argument. You can use the function that returns the action object, such updateCart and addItem. You wrap the state (cartItems) and dispatcher function (dispatch) in the cartData object and pass it to the value attribute in the CartContext.Provider component. Finally, it exports both the CartContextProvider and useCartContext functions.

You are going to use CartContextProvider as a component wrapper in the App component. This

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.