Redux Toolkit中action派发但state值不更新的原因

news2024/11/25 3:19:54

最近一个react项目使用了Redux Toolkit,但是遇到了一个问题:数组始终返回为null,读取不到length.

这个只是问题的表象,真正的原因是productList数据没能从redux中结构出来

但是postman请求是由数据返回的:

推断:虽然redux的action已经派发,但state值没有更新,导致页面渲染失败。

查看redux调试工具,action派发失败,状态为rejected,报错信息:undefined is not valid JSON

可是为什么会出现这个问题?redux哪里出了错误呢?

于是继续审查redux的代码,终于找到了线索:

这里有个JSON解构的操作:从header中获取"x-pagination"的信息。但是如果header中如果不存在"x-pagination"字段那么JSON.parse就会解析失败,因为此时相当于对undefined对象进行解析,自然就会报错,这就是redux为什么会解析失败的原因,因为下面postman显示返回的header中确实没有x-pagination字段:

所以,这里必须对hearder获取x-pagination的结果进行一个判空操作:

 JSON.parse(pagination ? pagination : null )

 通过上面一行代码就能避免JSON.parse失败,从而导致redux action派发出错

此时redux action派发成功,store里面也有数据了

以上的例子是web客户端出现的JSON解析错误导致的redux, action派发失败。

同样: 服务端如果出现JSON解析问题,同样也会导致客户端的redux解析错误,同样导致action派发失败。如下面的例子: redux报错: ""[object Object]" is not valid JSON"

 

原因是服务端在响应请求时,在设置headers没有把object对象转化成字符串,而是直接把object对象传给了header。

这样客户端在解析header数据时,必然报错!

解决办法:服务端设置headers时,使用JSON.stringify将JSON对象转化成JSON字符串:

 res.header("x-pagination", JSON.stringify(paginationInfo));

 总结:Redux Toolkit中action派发但state值不更新的原因,通常是由action派发失败造成。

action派发失败的原因: JSON数据解析错误。这里分两种情况:

1. react web客户端代码中redux做JSON.parse解析操作时,没有进行判空处理

2. 服务端设置header对象时,没有将JSON对象转化成字符串。

总而言之: redux使用JSON.parse时一定要非常小心,

而header必须通过字符串设置数据,不能接收JSON对象!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1043150.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

openMVS编译

参考官方文档:https://github.com/cdcseacave/openMVS/wiki/Building vcglib的安装 cd /home/juling/lib git clone -b v1.0.1 https://github.com/cdcseacave/VCG.git vcglibgit clone --recurse-submodules https://github.com/cdcseacave/openMVS.git cd openMV…

git代码管理(一)

目录 介绍暂存区安装创建仓库提交文件查看当前是否还有文件未提交查看提交历史版本回退恢复版本回退 介绍 git是一个分布式的代码版本管理工具(区别于集中式管理的svn),分布式的意思是对于同一个项目可以有多个仓库存储,分布在不…

服务器(Windows系统)自建filebrowser网盘服务器超详细教程

需要依赖(工具) 轻量服务器(云服务器)一台 —— 环境Windows Server 2019filebrowser安装包(https://github.com/filebrowser/filebrowser/releases) 下载安装filebrowser 进入链接下载:https:/…

基于OpenSceneGraph的三维模型格式转换(以OBJ为例),并简化、输出纹理图片到指定目录(附完整C++代码和exe)

文章目录 前言一、OpenSceneGraph库1. OSG源码2. 编译教程2. Windows编译完成版 二、osgconv格式转换工具1. osgconv官方说明文档2. osgconv工具调用 三、基于C格式转换,简化OBJ,输出纹理到指定目录1. 项目环境2. 完整代码3. 可执行文件 前言 本文基于O…

记录:移动设备软件开发(Activity的显式启动和隐式启动)

目录 Intent对象简述Intent的作用Intent开启Activtiy显式启动Activity隐式启动Activity Intent对象简述 Android的应用程序包含三种重要组件:Activity、Service、BroadcastReceiver,应用程序采用了一致的方式来启动它们——都是依靠Intent来启动的&…

flv怎么转换成mp4格式?准备3个方法给大家

flv怎么转换成mp4格式?FLV是一种流行的视频文件格式,最初由Adobe公司开发,用于在Web上播放和传输视频内容。FLV格式以其较小的文件大小和较高的压缩比而闻名,并广泛应用于在线视频分享平台、流媒体服务和网络广告等领域。能够提供…

c++图像的边缘检测

图像的边缘检测 cv::Canny 是 OpenCV 中用于进行边缘检测的函数,特别是用于检测图像中的边缘。Canny 边缘检测是一种广泛使用的技术,它能够识别图像中的边缘,这些边缘通常表示对象之间的边界或图像中的显著特征 void cv::Canny(const cv::M…

linux 查看CPU架构是AMD还是ARM

要查看 Linux 系统的 CPU 架构是 AMD 还是 ARM,可以使用以下命令: 使用 lscpu 命令并查找 Architecture 字段: lscpu | grep Architecture如果输出结果中包含 x86_64 或 i686,则表示系统的 CPU 架构是 AMD(或者是 x86…

地球红薯地中秋圆《乡村振兴战略下传统村落文化旅游设计》——世界旅行季许少辉八月新书辉少许

地球红薯地中秋圆《乡村振兴战略下传统村落文化旅游设计》——世界旅行季许少辉八月新书辉少许 地球红薯地中秋圆《乡村振兴战略下传统村落文化旅游设计》——世界旅行季许少辉八月新书辉少许

Python中的用法与常见问题解析

装饰器是Python语言中一种强大且常用的概念。通过装饰器,我们可以在不修改原始函数代码的情况下,给函数添加额外的功能,比如日志记录、性能分析、输入验证等。在本文中,我们将深入探讨Python中装饰器的用法和常见问题,…

接口自动化测试:pytest基础讲解

为什么要做接⼝测试? 只靠前端测试很难确保很⾼的覆盖率。接⼝测试,可以模拟出各种类型的⼊参,包括⼀些在前端模拟不出来的⼊参,还能根据接⼝⽂档的定义,设计出相对完善的⼊参值,在接⼝层保证质量&#xff…

@PostMapping‘ not applicable to type 这个是什么原因

PostMapping’ not applicable to type 这个是什么原因 这个错误的意思是 ‘PostMapping’ 注解没有被正确地应用到一个合适的元素上。在Spring MVC中,PostMapping通常用于注解一个处理HTTP POST请求的方法。 出现这个错误,可能的原因有: …

【STM32】读写内部Flash初步使用

基于stm32f103,作为个人学习记录使用 STM32 芯片内部有一个 FLASH 存储器,它主要用于存储代码,在紧急状态下常常会使用内部 FLASH 存储关键记录; 内部 FLASH 的构成 STM32 的内部 FLASH 包含主存储器、系统存储器以及选项字节区域 大容量…

手机相机系统介绍

目录 一张照片是如何生成的? 相机的成像原理 相机硬件 颜色四要素 相机硬件三大块 模组结构 镜头 镜头光路 镜头常见参数 镜头-FOV&EFL 镜头-焦距 镜头-光圈 图像传感器 图像传感器-像素-底 RGB排布 图像传感器-Pattern & PDAF Sensor CMOS sensor …

Python中的单元测试与代码覆盖率:实践与问题解决

当我们开发软件时,单元测试和代码覆盖率是非常重要的工具。它们可以帮助我们验证代码的正确性,并确保代码的质量和稳定性。在Python中,我们有很多强大的工具和库来进行单元测试和代码覆盖率分析。本文将向你分享在Python中进行单元测试和代码…

C++单例模式各种实现方式,终极版即简单又线程安全,无脑用就完了

📋 前言 🖱 博客主页:在下马农的碎碎念🤗 欢迎关注🔎点赞👍收藏⭐️留言📝✍ 本文由在下马农原创,首发于CSDN📆 首发时间:2023/8/25📅 最近更新时…

学生宿舍管理系统(前端java+后端Vue)实现-含前端与后端程序

界面介绍 登录 ###宿舍管理 ###菜单管理 ###角色管理 ###班级管理

编程每日一练(多语言实现):判断偶数

文章目录 一、实例描述二、技术要点三、代码实现3.1 C 语言实现3.2 Python 语言实现3.3 Java 语言实现 一、实例描述 利用单条件单分支选择语句判断输入的一个整数 是否是偶数。 运行程序,输入一个 整数18, 然后按回车键,将提示该数字是偶数…

性能压力测试的定义及步骤是什么

在今天的数字化时代,软件系统的性能和稳定性对于企业的成功至关重要。为了确保软件在高负载和压力情况下的正常运行,性能压力测试成为了不可或缺的环节。本文将介绍性能压力测试的定义、步骤。 一、性能压力测试的定义和目标 性能压力测试是通过模拟实际…

Spring整合RabbitMQ——生产者

添加依赖坐标,在producer和consumer模块的pom文件中各复制一份。 配置producer的配置文件 配置producer的xml配置文件 编写测试类发送消息