Как вы можете написать меньше повторяющегося кода для ловушки useReducer в React?

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

Я считаю, что проблема не в упомянутом вами редукторе, а в том, как вы его используете. При рендеринге продуктов вы должны использовать 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

Answer 2

Вы можете реорганизовать свой код. Этот подход, случай 'SET_PRICE_1, не будет масштабироваться. Можете ли вы опубликовать пример ответа Api? В зависимости от вашей структуры данных у вас должно быть что-то вроде:

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

или, может быть,

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

на тот случай, если вам просто нужна цена продукта (это тоже не будет масштабироваться),

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