React Hooks - useContetx和useReducer的基本使用

import React, { useReducer, createContext, useContext } from 'react';
 
// 定义一个Reducer来处理状态的更新
function cartReducer(state, action) {
  switch (action.type) {
    case 'add_item':
      return { ...state, items: [...state.items, action.item] };
    case 'remove_item':
      return { ...state, items: state.items.filter((item) => item !== action.item) };
    default:
      throw new Error();
  }
}
 
// 创建一个Context对象
const CartContext = createContext();
 
export function CartProvider({ children }) {
  const [cartState, dispatchCartAction] = useReducer(cartReducer, { items: [] });
 
  // 使用Context.Provider来提供cartState和dispatchCartAction给子组件
  return (
    <CartContext.Provider value={{ cartState, dispatchCartAction }}>
      {children}
    </CartContext.Provider>
  );
}
 
export function useCart() {
  const context = useContext(CartContext);
  if (!context) {
    throw new Error('useCart must be used within a CartProvider');
  }
  const { cartState, dispatchCartAction } = context;
  return { cartState, dispatchCartAction };
}

这段代码定义了一个简单的购物车状态管理，使用useReducer代替了useState来处理复杂的状态更新逻辑。同时，它展示了如何使用createContext和useContext来创建和使用一个上下文提供者（Context Provider）。这是React Hooks中状态管理的一个常见模式。