时间戳

首页 > 解决方案 > 在 Redux 状态下调度不改变对象

javascript - 在 Redux 状态下调度不改变对象

问题描述

所以我正在构建一个电子商务应用程序，我有两个值存储在 redux 状态中来处理购物车。一个是对象数组，每个对象包含 objectID 和数量的两个键。另一个是包含产品信息的对象，其 objectID 为键。这是我的操作/调度的代码。

addToCart: (product) => {
        return (dispatch, getState) => {
            const {productQuantity, storeSelected, products, storeKeys} = getState().Ecommerce;
            const UPC = product.UPC;
            let newQuant = 1;
            let newProducts;
            for(var p in productQuantity) {
                if (productQuantity[p].UPC === UPC) {
                    newProducts = products
                    newQuant += productQuantity[p].quantity;
                    productQuantity[p] = ({UPC, quantity: newQuant});
                }
            }
            if (!newProducts) {
                console.log("not found")
                productQuantity.push({UPC, quantity: 1});
                newProducts = {
                    ...products,
                    [UPC]: {
                        ...product,
                        price: product.stores[storeKeys[storeSelected]].price,
                        fromStore: storeKeys[storeSelected],
                    }
                }
            }
            dispatch({
                type: actions.CHANGE_CART,
                products: newProducts,
                productQuantity
            });
        };
    },

行动肯定会进行。接下来是我的减速机。

case actions.CHANGE_CART:
    console.log('This runs')
    console.log(action.products);
    console.log(action.productQuantity);
    return {
        ...state,
        products: action.products,
        productQuantity: action.productQuantity
    };

这也会执行，实际上在检查状态时，productQuantity 会在状态中更新，但 products 不会。在这一点上，我已经尝试了所有的定义配置，并且正在撕扯我的头发。帮助将不胜感激。

我可以确认的：

标签： javascriptreactjsreduxredux-sagaredux-thunk

解决方案

第一个问题是您在调度操作之前更改现有状态，并且在 Redux 中禁止更改状态：

const {productQuantity, storeSelected, products, storeKeys} = getState().Ecommerce;
            const UPC = product.UPC;
            let newQuant = 1;
            let newProducts;
            for(var p in productQuantity) {
                if (productQuantity[p].UPC === UPC) {
                    newProducts = products
                    newQuant += productQuantity[p].quantity;
                    productQuantity[p] = ({UPC, quantity: newQuant});
                }
            }

对这里的任何更改都会改变productQuantityRedux 存储中的现有数据。不要那样做。

我不太清楚products这里发生了什么，因为逻辑感觉有点混乱。

我的建议：

首先，开始使用我们新的官方 Redux Toolkit 包。它具有configureStore()自动设置意外突变检测的功能，如果您发生突变，则会抛出错误。

其次，尝试将所有这些修改逻辑移动到您的 reducer中，而不是在动作创建端进行。

第三，使用 Redux Toolkit 的createSliceAPI，它使用 Immer 库允许您在 reducer 中编写“变异”逻辑，并将其安全地转换为正确的不可变更新结果。

推荐阅读