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

这篇具有很好参考价值的文章主要介绍了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,当向购物车中添加一个新的物品时,代码正常运行;但当反复添加一个物品时,代码报出如下错误:

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

搜下资料发现是因为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新值,因此代码正常运行。文章来源地址https://www.toymoban.com/news/detail-416798.html

到了这里,关于React redux toolkit: Uncaught Error:[Immer] An immer producer returned a new...的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React中使用Redux (二) - 通过react-redux库连接React和Redux

    react-redux库使用Redux 上一篇文章演示React中直接使用Redux的使用过程是十分繁琐的, 并且有许多重复代码 但是实际上redux官方帮助我们提供了 react-redux 的库,这个库是帮助我们完成连接redux和react的辅助工具, 可以直接在项目中使用,并且实现的逻辑会更加的严谨和高效 这篇我们

    2024年02月20日
    浏览(54)
  • 【React】redux和React-redux

    🎀个人主页:努力学习前端知识的小羊 感谢你们的支持:收藏🎄 点赞🍬 加关注🪐 redux 适用于多交互、多数据源的场景。 使用redux的场景: 某个组件的状态需要共享 一个组件需要改变其他组件的状态时 一个组件需要改变全局的状态时 redux的三大原则: 整个应用的 state

    2024年02月06日
    浏览(58)
  • React中使用Redux (一) - 在React中直接使用Redux

    开始之前需要强调一下,redux和react没有直接的关系,你完全可以在React, Angular, Ember, jQuery, or vanilla JavaScript中使用Redux 。 尽管这样说,redux依然是和React库结合的更好,因为他们是通过state函数来描述界面的状态,Redux可以发射状态的更新, 让他们作出相应; 目前redux在react中使

    2024年01月23日
    浏览(59)
  • 在react中使用redux && react-redux的使用demo

    前言: redux是一种状态管理工具,可以存储和操作一些全局或者很多组件需要使用的公共数据。 平心而论,redux的使用对于新上手来说不太友好,多个依赖包的,多种api的结合使用,相对来说比做同样一件事的vuex用起来比较麻烦.不过,熟能生巧,用多了也就习惯了,下面是个人的一个d

    2024年02月06日
    浏览(55)
  • 【React】React——redux

    🚩🚩🚩 💎个人主页: 阿选不出来 💨💨💨 💎个人简介: 一名大二在校生,学习方向前端,不定时更新自己学习道路上的一些笔记. 💨💨💨 💎目前开发的专栏: JS 🍭Vue🍭React🍭 💨💨💨 Redux 是 JavaScript 状态容器,提供可预测化的状态管理。 redux是什么 redux是一个专门用于

    2024年01月15日
    浏览(48)
  • 什么是redux?如何在react 项目中使用redux?

    redux是一种用于管理JavaScript应用程序的状态管理库。它可以与React、Augular、Vue等前端框架结合使用,但也可以纯在JavaScript应用程序中独立使用。redux遵循单项数据流的原则,通过一个全局的状态树来管理应用程序的状态,从而使状态的变化更加可预测和已于维护。 redux的核心

    2024年02月15日
    浏览(40)
  • 【React】React中编写CSS,Redux

    ❤️ Author: 老九 ☕️ 个人博客:老九的CSDN博客 🙏 个人名言:不可控之事 乐观面对 😍 系列专栏: style接受一个采用小驼峰命名属性的JS对象,而不是CSS字符串,可以动态获取当前state中的状态 缺点:1.写法上面需要使用驼峰2.编写样式没有提示3.大量的样式,代码混乱4

    2024年02月09日
    浏览(38)
  • React笔记(八)Redux

    一、安装和配置 React 官方并没有提供对应的状态机插件,因此,我们需要下载第三方的状态机插件 —— Redux。 1、下载Redux 在终端中定位到项目根目录,然后执行以下命令下载 Redux 2、创建配置文件 在 React 中,不会自动生成状态机的相关配置代码,因此,需要我们自己手动

    2024年02月10日
    浏览(41)
  • React(六) —— redux

    🧁个人主页:个人主页 ✌支持我 :点赞👍收藏🌼关注🧡 redux最主要是用作应用状态的管理。简言之,Redux用一个单独的常量状态树(state对象)保存这一整个应用的状态,这个对象不能直接被改变。当一些数据变化了,一个新的对象就会被创建(使用actions和reducers)这样就

    2023年04月16日
    浏览(34)
  • React | 再战Redux

    ✨ 个人主页:CoderHing 🖥️ React.js专栏:React.js 再战Redux 🙋‍♂️ 个人简介:一个不甘平庸的平凡人🍬 💫 系列专栏:吊打面试官系列  16天学会Vue  7天学会微信小程序  Node专栏 🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ 👉 你的一键三连是我更新的最大动力!

    2024年02月12日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包