这是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中有一个购物车示例-不同（更平坦）的数据结构。