这是Pro React 16犹太洁食书中的Redux减速器示例吗？

Question

我正在学习React和Redux，目前正在阅读Adam Freeman的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;

我的理解是reducer必须是纯函数，但是storeData当产品已经存在于cart数组中时，这一函数似乎会修改store参数。具体来说，它更新了cart项目的quantity属性，该属性existing来自storeData的cart数组的浅表副本。因此，storeData将被修饰为副作用。

我对么？

Answer 1

我认为你是对的。您不仅要改变状态（如您所指出的那样），而且还要返回此变异的对象。我相信您应该只使用Immutable JS中的'set'方法来更新化简器中的状态。

Answer 2

我认为创建减速器并返回新状态的正确方法如下：export default CartReducer = (storeData = [], action) => {    switch(action.type) {       case ActionTypes.CART_ADD:            return [..state, { ..action.cart }]       default:           return storeData;    }}这样，您可以创建的新副本state并简单地返回new state，还需要使reducer保持简单，并避免做其他事情，例如在reducer代码中添加/更新购物车的逻辑。您还需要创建一个default action并且返回原样state。

Answer 3

我将其称为用于新状态创建的元素的变异。不是纯粹的，但是恕我直言就足够了（当您知道优缺点时）：从应用程序的角度来看，它确实可以胜任对于相同的输入返回相同的输出（可重复操作序列）减速器的作用是根据当前状态和操作创建新状态。旧状态将不再使用-此突变无关紧要。缺点：它可能会影响redux开发工具，撤消操作可能无法正常工作（仅在一个方向上重放操作-redux-undo用于真正的撤消）优点：简单，内存使用量少在redux中有一个购物车示例-不同（更平坦）的数据结构。