Является ли этот пример редуктора Redux из книги Pro React 16 кошерным? - PullRequest
1 голос
/ 03 мая 2019

Я изучаю React и Redux, и сейчас читаю Pro React 16 Адама Фримена.Рассмотрим этот редуктор пример из главы 5. Этот редуктор обрабатывает действия, которые изменяют корзину покупок.Вот часть редуктора:

import { ActionTypes } from "./Types";

export const CartReducer = (storeData, action) => {
    let newStore = { cart: [], cartItems: 0, cartPrice: 0, ...storeData }
    switch(action.type) {
        case ActionTypes.CART_ADD: 
            const p = action.payload.product;
            const q = action.payload.quantity;

            let existing = newStore.cart.find(item => item.product.id === p.id);
            if (existing) {
                existing.quantity += q;
            } else {
                newStore.cart = [...newStore.cart, action.payload];
            }
            newStore.cartItems += q;
            newStore.cartPrice += p.price * q;            
            return newStore;

Насколько я понимаю, редукторы должны быть чистыми функциями, но этот, похоже, изменяет аргумент магазина storeData, когда продукт уже существует вcart массив.В частности, он обновляет свойство quantity элемента корзины existing, полученное из мелкой копии массива storeData cart.Таким образом, storeData будет изменен как побочный эффект.

Я прав?

Ответы [ 2 ]

2 голосов
/ 03 мая 2019

Я думаю, что вы правы.

Вы не только изменяете состояние (как вы указали), но вы также возвращаете этот мутированный объект.

Я считаю, что для обновления состояния в редукторе следует использовать только метод 'set' из Immutable JS.

0 голосов
/ 03 мая 2019

Это не побочный эффект. Я бы назвал это мутацией элемента, используемого для создания нового состояния.

Этот редуктор является чистым не является чистым , но ИМХО достаточно хорош (когда вы знаете плюсы / минусы):

  • с точки зрения приложения оно выполняет свою работу
  • возвращает одинаковые выходные данные для того же входа (повторяемая последовательность действий)

Роль редуктора заключается в создании нового состояния из текущего состояния и действия. Старое состояние больше не будет использоваться - эта мутация не имеет значения. Нет никаких требований / ограничений оставлять старое состояние без изменений.

CONS: это может повлиять на инструменты-редукторы, действие по отмене может работать неправильно (воспроизведение действий только в одном направлении - используйте redux-undo для реального отмены)

PROS: простота, меньшее использование памяти

Существует пример корзины покупок в redux - другая (более плоская) структура данных.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...