使用Context API管理购物车状态

我将首先将您的购物车状态和持久性隔离到react上下文提供程序的本地存储。上下文可以向应用的其余部分提供购物车状态和动作分派器，以及当状态使用效果更新时将状态持久化到localStorage。这将所有状态管理从应用程序中分离出来，应用程序只需要使用上下文来访问购物车状态并调度操作来更新它。

import React, { createContext, useEffect, useReducer } from "react";
import { cartReducer, initializer } from "../cartReducer";

export const CartContext = createContext();

export const CartProvider = ({ children }) => {
  const [cart, dispatch] = useReducer(cartReducer, [], initializer);

  useEffect(() => {
    localStorage.setItem("localCart", JSON.stringify(cart));
  }, [cart]);

  return (
    <CartContext.Provider
      value={{
        cart,
        dispatch
      }}
    >
      {children}
    </CartContext.Provider>
  );
};

在index.js的CartProvider中 Package 应用程序

<CartProvider>
  <App />
</CartProvider>

完成应用的其余部分

在cartReducer中细化reducer，并导出初始化函数和动作创建器。

const initialState = [];

export const initializer = (initialValue = initialState) =>
  JSON.parse(localStorage.getItem("localCart")) || initialValue;

export const cartReducer = (state, action) => {
  switch (action.type) {
    case "ADD_TO_CART":
      return state.find((item) => item.name === action.item.name)
        ? state.map((item) =>
            item.name === action.item.name
              ? {
                  ...item,
                  quantity: item.quantity + 1
                }
              : item
          )
        : [...state, { ...action.item, quantity: 1 }];

    case "REMOVE_FROM_CART":
      return state.filter((item) => item.name !== action.item.name);

    case "DECREMENT_QUANTITY":
      // if quantity is 1 remove from cart, otherwise decrement quantity
      return state.find((item) => item.name === action.item.name)?.quantity ===
        1
        ? state.filter((item) => item.name !== action.item.name)
        : state.map((item) =>
            item.name === action.item.name
              ? {
                  ...item,
                  quantity: item.quantity - 1
                }
              : item
          );

    case "CLEAR_CART":
      return initialState;

    default:
      return state;
  }
};

export const addToCart = (item) => ({
  type: "ADD_TO_CART",
  item
});

export const decrementItemQuantity = (item) => ({
  type: "DECREMENT_QUANTITY",
  item
});

export const removeFromCart = (item) => ({
  type: "REMOVE_FROM_CART",
  item
});

export const clearCart = () => ({
  type: "CLEAR_CART"
});

在Product.js中，通过useContext钩子获取cart上下文并分派addToCart操作

import React, { useContext, useState } from "react";
import { CartContext } from "../CartProvider";
import { addToCart } from "../cartReducer";

const Item = () => {
  const { dispatch } = useContext(CartContext);

  ...

  const addToCartHandler = (product) => {
    dispatch(addToCart(product));
  };

  ...

  return (
    ...
  );
};

CartItem.js获取并使用购物车上下文来分派减少数量或删除项目的操作。

import React, { useContext } from "react";
import { CartContext } from "../CartProvider";
import { decrementItemQuantity, removeFromCart } from "../cartReducer";

const CartItem = () => {
  const { cart, dispatch } = useContext(CartContext);

  const removeFromCartHandler = (itemToRemove) =>
    dispatch(removeFromCart(itemToRemove));

  const decrementQuantity = (item) => dispatch(decrementItemQuantity(item));

  return (
    <>
      {cart.map((item, idx) => (
        <div className="cartItem" key={idx}>
          <h3>{item.name}</h3>
          <h5>
            Quantity: {item.quantity}{" "}
            <span>
              <button type="button" onClick={() => decrementQuantity(item)}>
                <i>Decrement</i>
              </button>
            </span>
          </h5>
          <h5>Cost: {item.cost} </h5>
          <button onClick={() => removeFromCartHandler(item)}>Remove</button>
        </div>
      ))}
    </>
  );
};

App.js通过上下文钩子获取购物车状态和调度器，并更新total items和price逻辑以说明商品数量。

import { CartContext } from "./CartProvider";
import { clearCart } from "./cartReducer";

export default function App() {
  const { cart, dispatch } = useContext(CartContext);

  const clearCartHandler = () => {
    dispatch(clearCart());
  };

  const { items, total } = cart.reduce(
    ({ items, total }, { cost, quantity }) => ({
      items: items + quantity,
      total: total + quantity * cost
    }),
    { items: 0, total: 0 }
  );

  return (
    <div className="App">
      <h1>Emoji Store</h1>
      <div className="products">
        <Product />
      </div>
      <div className="cart">
        <CartItem />
      </div>
      <h3>
        Items in Cart: {items} | Total Cost: ${total.toFixed(2)}
      </h3>
      <button onClick={clearCartHandler}>Clear Cart</button>
    </div>
  );
}

这是我的工作。我添加了cartReducer的所有案例，因为我很喜欢它。
如果您想自己解决这个问题，这里是第一个使用localStorage保存项值的设置的情况。
我正在做的事情的概述是：使用switch case在reducer中设置新的状态，然后在每次通过效果更改购物车时将localStorage状态设置为新值。
产品中的逻辑只是被一个简单的动作调度所取代。因为逻辑反而在减速器中。您可能可以简化ADD_TO_CART案例中的逻辑，但它以不可变的方式处理所有事情。使用像immer这样的东西可以将逻辑简化一点。

const storageKey = "localCart";
const cartReducer = (state, action) => {
  switch (action.type) {
    case "ADD_TO_CART": {
      const product = action.payload;
      let index = state.findIndex((item) => product.name === item.name);
      if (index >= 0) {
        const newState = [...state];
        newState.splice(index, 1, {
          ...state[index],
          quantity: state[index].quantity + 1
        });
        return newState
      } else {
        return [...state, { ...product, quantity: 1 }];
      }
    }
    default:
      throw new Error();
  }
};

在App组件中使用：

const [cart, cartDispatch] = useReducer(
    cartReducer,
    [],
    // So we only have to pull from localStorage one time - Less file IO
    (initial) => JSON.parse(localStorage.getItem(storageKey)) || initial
  );
  useEffect(() => {
    // This is a side-effect and belongs in an effect
    localStorage.setItem(storageKey, JSON.stringify(cart));
  }, [cart]);

在Product组件中使用：

const addToCartHandler = (product) => {
    dispatch({ type: "ADD_TO_CART", payload: product });
  };

全工作CodeSandbox

下面是我创建的一个简单的useSessionStorage钩子：

import { Dispatch, Reducer, useCallback, useEffect, useReducer } from 'react';

const initializer =
  (key: string) =>
  <T>(initial: T) => {
    const stored = sessionStorage.getItem(key);
    if (!stored) return initial;
    return JSON.parse(stored);
  };

export const useSessionReducer = <T extends object, A>(
  reducer: Reducer<T, A>,
  initialState: T,
  key: string,
): [T, Dispatch<A>, VoidFunction] => {
  const [state, dispatch] = useReducer(reducer, initialState, initializer(key));
  const clearValue = useCallback(() => sessionStorage.removeItem(key), [key]);

  useEffect(() => {
    sessionStorage.setItem(key, JSON.stringify(state));
  }, [state]);

  return [state, dispatch, clearValue];
};

这就是你如何使用它：

const [state, dispatch, clearSaved] = useSessionReducer(cartReducer, initialState, 'cart');

P.S.将sessionStorage与localStorage交换不会改变钩子的工作方式。