React redux toolkit: Uncaught Error:[Immer] An immer producer returned a new...

React在写一个购物车的redux toolkit时遇到了问题。核心代码如下:

import { createSlice } from "@reduxjs/toolkit";

const cartSlice = createSlice({
    name: 'cart',
    initialState: {
        cartItems: [],
        cartItemCount: 0
    },
    reducers: {
        addProduct(state, action) {
            const { imageUrl, name, price } = action.payload
            let newCartItems = [...state.cartItems]

            let flag = newCartItems.some((item, index, arr) => {
                if(item.name == name) {
                    arr[index].quantity += 1
                    return true
                }
            })

            if(!flag) {
                newCartItems = [ 
                    ...state.cartItems,
                    { imageUrl, name, price, quantity: 1 } 
                ]
            }

            const cartItemCount = newCartItems.reduce(
                (prevTotal, currItem) =>  prevTotal + currItem.quantity, 0
            )
            return { cartItems: newCartItems, cartItemCount }
        }
    }
})

export const { addProduct, deleteProduct, incQuantity, decQuantity } = cartSlice.actions
export default cartSlice.reducer

核心逻辑是,调用addProduct来修改redux所管理的cartItems和cartItemCount,当向购物车中添加一个新的物品时,代码正常运行;但当反复添加一个物品时,代码报出如下错误:

搜下资料发现是因为redux使用immer,不允许在reducer中修改state值后还return,二者只能取其一。

因此,当添加一个新物品时,由于没有修改cartItems,因此可以有返回值,不报错。

但当添加一个重复的物品时,即使在最开始使用了let newCartItems = [...state.cartItems]来创建一个新的对象,但由于state.cartItems数组中保存的不是基本数据类型,而是一个对象,因此newCartItems保存的是state.cartItems中各个对象的引用,即

newCartItems == state.cartItems  // false
newCartItems[0] == state.cartItems[0]  // true

由此可得,添加一个新物品时,由于既修改了state,又return了新值,因此报出immer错误。

修改后的代码如下:

addProduct(state, action) {
    const { imageUrl, name, price } = action.payload

    let flag = state.cartItems.some((item, index, arr) => {
        if(item.name == name) {
            arr[index].quantity += 1
            state.cartItemCount += 1
            return true
        }
    })

    if(!flag) {
        state.cartItems.push({ imageUrl, name, price, quantity: 1 })
        state.cartItemCount += 1
    }
}

这里只是对state做了修改,而没有return新值,因此代码正常运行。

热门相关:地球第一剑   霸皇纪   第一神算:纨绔大小姐   仗剑高歌   刺客之王