使用自定义钩子创建一个类似商店的redux

import { useState } from 'react';

const useCustomRedux = () => {
  const [state, setState] = useState({}); // 初始状态为空对象

  const dispatch = (action) => {
    // 根据不同的action类型更新状态
    switch (action.type) {
      case 'ADD_ITEM':
        setState((prevState) => ({
          ...prevState,
          items: [...prevState.items, action.payload],
        }));
        break;
      case 'REMOVE_ITEM':
        setState((prevState) => ({
          ...prevState,
          items: prevState.items.filter((item) => item.id !== action.payload),
        }));
        break;
      default:
        break;
    }
  };

  return [state, dispatch];
};

export default useCustomRedux;

import React from 'react';
import useCustomRedux from './useCustomRedux';

const ProductList = () => {
  const [state, dispatch] = useCustomRedux();

  const handleAddToCart = (product) => {
    dispatch({ type: 'ADD_ITEM', payload: product });
  };

  return (
    <div>
      {state.items.map((item) => (
        <div key={item.id}>
          <span>{item.name}</span>
          <button onClick={() => handleAddToCart(item)}>Add to Cart</button>
        </div>
      ))}
    </div>
  );
};

export default ProductList;