如何在 React 中为 useReducer 钩子编写更少、重复的代码？

Question

我正在创建一个 useReducer，例如，设置商品的价格。

const reducer = (state, action) => {
    switch (action.type) {
      case 'SET_PRICE': 
        return {
          ...state,
          price: action.payload,
        }
      default:
        return state
    }
  }

我现在必须拥有多个这样的 SET_PRICE，因为我有数百种产品，所以我开始写

case 'SET_PRICE_0': 
        return {
          ...state,
          price_0: action.payload,
        }
case 'SET_PRICE_1': 
        return {
          ...state,
          price_1: action.payload,
        }
      ...

如果我写超过 10 个这样的代码，我可以看到有问题，更不用说 100 个了……有没有其他方法可以编写更少的代码？

Answer 1

你可能想重构你的代码。 这种方法，案例 'SET_PRICE_1，不会扩展。 你能发布一个 Api 响应的例子吗？ 根据您的数据结构，您应该具有以下内容：

products: [
  {
    productName: 'productName',
    price: '$$$',
  },
]

或者可能

 products: {
   [productName]: {
     price: '$$$',
   } 
 }

以防万一，您只需要产品价格（这也不会缩放），

  productPrices: {
    [productName]: '$$$'
  }

Answer 2

我相信问题不在于您提到的减速器，而在于您使用它的方式。 在渲染产品时，您应该在安装每个产品组件时将useReducer钩子与第一个减速器（具有 SET_PRICE 的那个）一起使用。

这是一个虚拟实现：

const ProductComponent = () => {
    const [price, setPrice] = useReducer(reducer, initialState);
    return (
        <div> ... </div>
    );
};

然后您可以使用此组件在您的产品列表中添加 map。

您还可以参考这篇关于不同useReducer配方的详细文章： https://medium.com/crowdbotics/how-to-use-usereducer-in-react-hooks-for-performance-optimization-ecafca9e7bf5