React 的 useReducer 和 Redux 的区别及什么情况下应该使用 useReducer

import React, { useState } from 'react';
function Counter() {
  // 定义状态和更新函数
  const [count, setCount] = useState(0);
  // 增加计数的函数
  const increment = () => {
    setCount(count + 1);
  };
  // 减少计数的函数
  const decrement = () => {
    setCount(count - 1);
  };
  // 重置计数的函数
  const reset = () => {
    setCount(0);
  };
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

import React, { useReducer } from 'react';
// 定义action类型
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';
const RESET = 'RESET';
// 定义reducer函数
const counterReducer = (state, action) => {
  switch (action.type) {
    case INCREMENT:
      return state + 1;
    case DECREMENT:
      return state - 1;
    case RESET:
      return 0;
    default:
      return state;
  }
};
function Counter() {
  // 使用useReducer初始化状态和dispatch函数
  const [count, dispatch] = useReducer(counterReducer, 0);
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch({ type: INCREMENT })}>+</button>
      <button onClick={() => dispatch({ type: DECREMENT })}>-</button>
      <button onClick={() => dispatch({ type: RESET })}>Reset</button>
    </div>
  );
}

import React, { useReducer } from 'react';
// 定义action类型
const ADD_TO_CART = 'ADD_TO_CART';
const REMOVE_FROM_CART = 'REMOVE_FROM_CART';
const UPDATE_QUANTITY = 'UPDATE_QUANTITY';
const CLEAR_CART = 'CLEAR_CART';
// 定义reducer函数
const cartReducer = (state, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      // 检查商品是否已在购物车中
      const existingItem = state.find(item => item.id === action.payload.id);
      if (existingItem) {
        // 如果已存在，增加数量
        return state.map(item => 
          item.id === action.payload.id 
            ? { ...item, quantity: item.quantity + 1 } 
            : item
        );
      } else {
        // 如果不存在，添加新商品
        return [...state, { ...action.payload, quantity: 1 }];
      }
    case REMOVE_FROM_CART:
      // 移除商品
      return state.filter(item => item.id !== action.payload);
    case UPDATE_QUANTITY:
      // 更新商品数量
      return state.map(item => 
        item.id === action.payload.id 
          ? { ...item, quantity: action.payload.quantity } 
          : item
      );
    case CLEAR_CART:
      // 清空购物车
      return [];
    default:
      return state;
  }
};
function ShoppingCart() {
  // 使用useReducer初始化购物车状态
  const [cart, dispatch] = useReducer(cartReducer, []);
  // 计算购物车总价
  const totalPrice = cart.reduce((total, item) => 
    total + item.price * item.quantity, 0);
  return (
    <div>
      <h1>Shopping Cart</h1>
      <ul>
        {cart.map(item => (
          <li key={item.id}>
            {item.name} x {item.quantity} = ${item.price * item.quantity}
            <button onClick={() => dispatch({ 
              type: UPDATE_QUANTITY, 
              payload: { id: item.id, quantity: item.quantity + 1 } 
            })}>+</button>
            <button onClick={() => dispatch({ 
              type: UPDATE_QUANTITY, 
              payload: { id: item.id, quantity: Math.max(1, item.quantity - 1) } 
            })}>-</button>
            <button onClick={() => dispatch({ 
              type: REMOVE_FROM_CART, 
              payload: item.id 
            })}>Remove</button>
          </li>
        ))}
      </ul>
      <p>Total: ${totalPrice}</p>
      <button onClick={() => dispatch({ type: CLEAR_CART })}>Clear Cart</button>
    </div>
  );
}

// actions.js
// 定义action类型常量
export const ADD_TO_CART = 'ADD_TO_CART';
export const REMOVE_FROM_CART = 'REMOVE_FROM_CART';
export const UPDATE_QUANTITY = 'UPDATE_QUANTITY';
export const CLEAR_CART = 'CLEAR_CART';
// 定义action creator函数
export const addToCart = (product) => ({
  type: ADD_TO_CART,
  payload: product
});
export const removeFromCart = (productId) => ({
  type: REMOVE_FROM_CART,
  payload: productId
});
export const updateQuantity = (productId, quantity) => ({
  type: UPDATE_QUANTITY,
  payload: { productId, quantity }
});
export const clearCart = () => ({
  type: CLEAR_CART
});
// reducers.js
import { ADD_TO_CART, REMOVE_FROM_CART, UPDATE_QUANTITY, CLEAR_CART } from './actions';
// 定义初始状态
const initialState = [];
// 定义reducer函数
const cartReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      const existingItem = state.find(item => item.id === action.payload.id);
      if (existingItem) {
        return state.map(item => 
          item.id === action.payload.id 
            ? { ...item, quantity: item.quantity + 1 } 
            : item
        );
      } else {
        return [...state, { ...action.payload, quantity: 1 }];
      }
    case REMOVE_FROM_CART:
      return state.filter(item => item.id !== action.payload);
    case UPDATE_QUANTITY:
      return state.map(item => 
        item.id === action.payload.productId 
          ? { ...item, quantity: action.payload.quantity } 
          : item
      );
    case CLEAR_CART:
      return [];
    default:
      return state;
  }
};
export default cartReducer;
// store.js
import { createStore } from 'redux';
import cartReducer from './reducers';
// 创建store
const store = createStore(cartReducer);
export default store;
// CartComponent.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addToCart, removeFromCart, updateQuantity, clearCart } from './actions';
function ShoppingCart() {
  // 获取store中的状态
  const cart = useSelector(state => state);
  const dispatch = useDispatch();
  // 计算购物车总价
  const totalPrice = cart.reduce((total, item) => 
    total + item.price * item.quantity, 0);
  return (
    <div>
      <h1>Shopping Cart</h1>
      <ul>
        {cart.map(item => (
          <li key={item.id}>
            {item.name} x {item.quantity} = ${item.price * item.quantity}
            <button onClick={() => dispatch(updateQuantity(item.id, item.quantity + 1))}>+</button>
            <button onClick={() => dispatch(updateQuantity(item.id, Math.max(1, item.quantity - 1)))}>-</button>
            <button onClick={() => dispatch(removeFromCart(item.id))}>Remove</button>
          </li>
        ))}
      </ul>
      <p>Total: ${totalPrice}</p>
      <button onClick={() => dispatch(clearCart())}>Clear Cart</button>
    </div>
  );
}