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

【问题标题】：How can you write less, repetitive code for a useReducer hook in React?如何在 React 中为 useReducer 钩子编写更少、重复的代码？
【发布时间】：2020-04-06 16:23:49
【问题描述】：

我正在创建一个 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 个，我可以看到有问题...有没有其他方法可以编写更少的代码？

【问题讨论】：

请张贴您使用的初始状态+您为什么要一次设置所有产品的价格？要么您应该在每个产品的价格中包含价格，或者当用户为您设置的每个产品输入价格时

标签： javascript reactjs react-hooks use-reducer

【解决方案1】：

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

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

或许

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

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

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

【讨论】：

【解决方案2】：

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

这是一个虚拟实现：

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

然后您可以使用此组件映射到您的产品列表。

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

【讨论】：