1

我正在创建一个 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 个了……有没有其他方法可以编写更少的代码？

4

2 回答 2

0

我相信问题不在于您提到的减速器，而在于您使用它的方式。在渲染产品时，您应该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

于 2020-04-06T17:11:02.470 回答
0

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

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

或者可能

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

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

  productPrices: {
    [productName]: '$$$'
  }
于 2020-04-06T16:27:50.093 回答