[React] Use the React Context API to Globally Manage State

Using React hooks like useState makes it easy to manage things like a shopping cart, but that state may only be available one instance at a time. What if we wanted that state to be available between multiple pages?

We can take advantage of React's Context API which lets us extend our cart state by making that state available anywhere we want in the app.

In our app, we want to move the cart from the Home page component to the header which requires us to use context. We will wrap our app in a CartContext.Provider and pass in cart from our cart hook. This will allow us to grab subtotal and checkout for the Nav component.

 

If there is one state which both used in pageA and pageB, we can lift this state into Context, then it is availabel for both pageA & B

 

A hook file, contains both Context and state.

import { useState, useContext, createContext } from 'react';
import { initiateCheckout } from '../lib/payments.js'
import products from '../products.json';

const defaultCart = {
  products: {}
}

export const CartContext = createContext();

export function useCartState() {

  const [cart, updateCart] = useState(defaultCart);

  ...return {
    cart,
    subtotal,
    quantity,
    addToCart,
    checkout
  }

}
export function useCart() {
  const cart = useContext(CartContext);
  return cart;
}

 

index.js:

function MyApp({ Component, pageProps }) {
  const cart = useCartState();
  return (
    <CartContext.Provider value={cart}>
      <Nav />
      <Component {...pageProps} />
    </CartContext.Provider>
  )
}

 

Uage:

const Nav = () => {
  
    const { subtotal, checkout} = useCart();

  return (
    <nav className={styles.nav}>
      <p className={styles.navTitle}>
        Space Jelly Shop
      </p>
      <p className={styles.navCart}>
        <button onClick={checkout}>
          <FaShoppingCart /> ${subtotal}
        </button>
      </p>
    </nav>
  )
}

export default Nav;