如何在React Reducer中添加获取单个对象的方法？

首先明确：Reducer的核心是维护状态更新，查询单个对象的逻辑没必要塞进Reducer里，更高效的方式是直接在组件或自定义Hook中处理，或者按需维护选中状态。

方案一：直接在组件/自定义Hook中筛选（推荐） #

不需要修改现有状态和Reducer，直接从products数组里根据ID查找：

// 示例：在自定义Hook中封装查询逻辑
const useProduct = () => {
  const { state } = useContext(ProductContext);
  const getProductById = (id) => {
    return state.products.find(prod => prod.id === id);
  };
  return { getProductById, ...state };
};

也可以把这个方法直接放进Context的value里，供所有子组件调用：

// 在Provider组件中
const value = {
  products: state.products,
  getProductById: (id) => state.products.find(prod => prod.id === id),
  dispatch
};

这种方式不用修改状态，完全避免同步问题，符合React的设计逻辑。

方案二：维护选中状态（适合需要持久化选中场景） #

如果你的业务需要持久化"选中的产品"状态，可以在初始状态中添加selectedProduct，并在所有修改产品的动作中同步更新它，解决你之前遇到的"数据过时"问题：

修改初始状态 #

const initialState = {
  products: [
    { id: 1, name: "Milk", amount: 3, company: "XXX" }
  ],
  selectedProduct: null
};

更新Reducer（修复原有笔误+同步选中状态） #

export default function appReducer(state, action) {
  switch (action.type) {
    case "ADD_PRODUCT":
      // 修复原有笔误：state.product → state.products
      return {
        ...state,
        products: [...state.products, action.payload],
      };

    case "EDIT_PRODUCT":
      const updatedProduct = action.payload;
      const updatedProducts = state.products.map((prod) => {
        // 修复原有笔误：product → prod
        if (prod.id === updatedProduct.id) {
          return updatedProduct;
        }
        return prod;
      });
      // 同步更新选中的产品（如果编辑的是当前选中项）
      const updatedSelected = state.selectedProduct?.id === updatedProduct.id 
        ? updatedProduct 
        : state.selectedProduct;
      return {
        ...state,
        products: updatedProducts,
        selectedProduct: updatedSelected
      };

    case "REMOVE_PRODUCT":
      const productIdToRemove = action.payload;
      const filteredProducts = state.products.filter(
        (prod) => prod.id !== productIdToRemove
      );
      // 删除选中项时清空selectedProduct
      const newSelected = state.selectedProduct?.id === productIdToRemove 
        ? null 
        : state.selectedProduct;
      return {
        ...state,
        products: filteredProducts,
        selectedProduct: newSelected
      };

    case "SELECT_PRODUCT":
      // 添加选中动作，根据ID设置选中项
      return {
        ...state,
        selectedProduct: state.products.find(prod => prod.id === action.payload) || null
      };

    default:
      return state;
  }
};

之后要获取单个产品，只需dispatch{type: "SELECT_PRODUCT", payload: 目标ID}，再从state中读取selectedProduct即可，所有状态更新都会同步维护选中项，不会出现过时问题。

避坑提醒 #

你现有Reducer里有两个明显的笔误，已经在上面的代码中修复：

• ADD_PRODUCT中错误使用state.product，应该是state.products
• EDIT_PRODUCT中循环变量名写错，product未定义，应该用prod

内容的提问来源于stack exchange，提问作者Elżbieta Kaczmarek