时间戳

首页 > 解决方案 > 如何在 React 中为 useReducer 钩子编写更少、重复的代码？

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

问题描述

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

标签： javascriptreactjsreact-hooksuse-reducer

解决方案

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

推荐阅读