React redux更新数据的诡异特征==》彻底掌握redux更新state机制的精髓

news2024/11/17 23:36:42

此文章是跟随我上一篇文章《Redux Toolkit中action派发但state值不更新的原因》写的。

本来一切都搞定了,此时我突发奇想: 如果让api服务端不发送包含x-pagination的header信息,web端会不会报错。因为按照web端 redux原有的逻辑: JSON.parse(response.headers["x-pagination"]), 因为获取不到x-pagination字段,那么JSON.parse是解析一个undefine,自然会报错。

那么说干就干,先从服务端开始:不发送x-pagination的header信息

 然而此时访问web端,仍然可以正常分页!

 而且查看chrome network的调试信息,header里面确实已经没有x-pagination信息了

 

 这说明api服务端设置是生效的,可是为什么web端还是可以正常分页呢

首先我们要看看react源码中是怎么读取redux store数据的:

从上图可以看到,pagination数据是从redux store中的productSearch获取的。

所以打开chrome的redux调试插件,看看productSearch的action和state状态:

从上图可以看到Action: productSearch/searchProduct是失败的rejected状态

那么说明: 前面说的JSON.parse确实出错了,然后再看看state中有没有数据?

 奇怪的是尽管action的状态是rejected,但是state中pagination还是有数据的

可是为什么会这样呢? 所以再回去看看项目中redux相关代码:

 从这里看到原因了:因为之前action成功派发以后,state中已经存在pagination数据了

但是在这里action rejected之后:并没有更新data和pagination数据。(备注:这里redux采用了持久化)

所以下面这个useSelector在读取redux store时是仍然可以读取到数据的。

总结:redux才在采用持久化之后,如果第一次成功派发action: 将数据存储在store中。

当第二次action派发时,如果在redux代码逻辑中:对于rejected状态没有主动更新state数据,那么即便此时action出现了错误,state状态也不会更新

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

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

相关文章

【PowerShell】PowerShell的Core版本的额外配置

在PowerShell 7.1 安装完成后,默认情况下打开PowerShell 会直接进入到系统内置的PowerShell,如果希望通过远程连接或者PowerShell Web Access 进入到PowerShell 7环境的界面,就需要进行环境的再配置才能实现PowerShell 7.1 的环境连接。需要为外部的环境提供连接的话需要按照…

GNU C中({})表达式的返回值

文章目录 先放结论废话({})复合表达式介绍最后的废话 先放结论 ({子表达式1;子表达式2;})是GNU C中的一个拓展,返回值是最后一个表达式的返回值,也就是子表达式2的返回值。 废话 这个表达式是在看Linux源码的时候发现的(内核小白随便翻看到的…

将强化学习引入NLP:原理、技术和代码实现

目录 1. 强化学习简介1.1 什么是强化学习?1.2 强化学习的核心组件1.2.1 智能体 (Agent)1.2.2 状态 (State)1.2.3 动作 (Action)1.2.4 奖励 (Reward) 2. 强化学习与NLP的结合2.1 为什么在NLP中使用强化学习?2.2 强化学习在NLP中的应用场景2.2.1 对话系统2…

SAP Oracle表空间扩展技术手册

1、DBACOCKPIT下查看表空间 当表空间不足(达到99%)时,需要按以下步骤扩充表空间(每次扩充20000M,20G): (也可以通过DB13,DB02查看表空间) 新浪博客 Tablespace PSAPSR3 is 100% used | SAP Community Oracle是通过增加数据文件的方式来为表空间扩容。为指定表空间增…

【2023全新保姆级教图文教程】三分钟快速安装好Anacaonda3+Pycharm运行Python

😎 作者介绍:我是程序员洲洲,一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主、前后端开发、人工智能研究生。公粽号:程序员洲洲。 🎈 本文专栏:本文…

抖音seo账号矩阵源码系统

1. 开通多个抖音账号,并将它们归纳为一个账号矩阵系统。 2. 建立一个统一的账号管理平台,以便对这些账号进行集中管理,包括账号信息、内容发布、社区交互等。 3. 招募专业的运营团队,对每个账号进行精细化运营,包括内…

恢复删除文件?不得不掌握的4个方法!

“删除了的文件还可以恢复吗?有个文件我本来以为不重要了,就把它删除了,没想到现在还需要用到!这可怎么办?有没有办法找回来呢?” 重要的文件一旦丢失或误删可能都会对我们的工作和学习造成比较大的影响。怎…

【JavaScript保姆级教程】Javascript常量

文章目录 前言一、常量1.1 常量是什么1.2 常量的作用 二、示例代码2.1 示例1:声明一个常量2.2 示例2:常量的命名规则2.3 示例3:常量与变量的区别 总结 前言 欢迎来到【JavaScript保姆级教程】!在本篇教程中,我们将讨论…

基于微信小程序的小说图书商城管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言用户微信端的主要功能有:管理员的主要功能有:具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序(小蔡coding)有保障的售后福利 代码参考源码获取 前言 💗博主介绍:✌全网粉…

CSDN热榜分析3:实现领域热榜的爬取

文章目录 领域热榜爬取函数领域热榜按钮功能实现 热榜分析系列: CSDN热榜分析🔥 UI界面🔥 领域热榜 领域热榜爬取函数 CSDN热榜共有21个子领域,包括C、云原生、人工智能、前沿技术、软件工程、后端、Java、JavaScript、PHP、P…

NSSCTF

[SWPUCTF 2021 新生赛]gift_F12 在源代码界面找到了flag [SWPUCTF 2021 新生赛]jicao 源码 <?php highlight_file(index.php); include("flag.php"); $id$_POST[id]; $jsonjson_decode($_GET[json],true); if ($id"wllmNB"&&$json[x]"…

Learn Prompt- Midjourney 图片生成:常用参数

在上一页当中&#xff0c;我们在解说基本设置的同时&#xff0c;举例了不少以--开头的参数。 参数是添加到提示中的选项&#xff0c;可更改图像的生成方式&#xff0c;图像的纵横比&#xff0c;在 Midjourney模型版本之间切换&#xff0c;更改使用的 Upscaler 等等。使用参数的…

基于FPGA的图像直方图统计实现,包括tb测试文件和MATLAB辅助验证

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1、图像数据传输 4.2、直方图统计算法 4.3、时序控制和电路设计 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 vivado2019.2 matlab2022a 3.部分核心程序 timescal…

阻塞队列-生产者消费者模型

阻塞队列介绍标准库阻塞队列使用基于阻塞队列的简单生产者消费者模型。实现一个简单型阻塞队列 &#xff08;基于数组实现&#xff09; 阻塞队列介绍 不要和之前学多线程的就绪队列搞混&#xff1b; 阻塞队列&#xff1a;也是一个队列&#xff0c;先进先出。带有特殊的功能 &…

LeetCode_二叉树_中等_1372.二叉树中的最长交错路径

目录 1.题目2.思路3.代码实现&#xff08;Java&#xff09; 1.题目 给你一棵以 root 为根的二叉树&#xff0c;二叉树中的交错路径定义如下&#xff1a; 选择二叉树中 任意 节点和一个方向&#xff08;左或者右&#xff09;。如果前进方向为右&#xff0c;那么移动到当前节点…

基于Python + SnowNLP实现一个文本情感分析系统

当你浏览社交媒体、新闻或任何数字内容时&#xff0c;你有没有想过背后的技术是如何分析和理解这些文本的情感的&#xff1f;有没有想过在数百万条评论、帖子或文章中&#xff0c;如何快速地识别出其中的积极和消极情绪&#xff1f;在这篇文章中&#xff0c;我们将揭示其中的奥…

数据结构—堆(C语言实现)

目录 堆是什么&#xff1f; 一、大堆 一、小堆 如何实现堆&#xff1f; 代码实现 &#xff1f; 一、定义堆的结构体 二、初始化堆 三、构建堆 1.利用向下调整算法 2.开始构建 四、插入元素 1.利用向上调整算法 五、取出堆顶元素、销毁堆 六、堆排序 Extra&#…

SpringBoot中xml映射文件

1.规范 说明&#xff1a;XML映射文件的名称与Mapper接口名称一致&#xff0c;并且将XML映射文件和Mapper接口放置在相同包下&#xff08;同包同名&#xff09;。 xML映射文件的namespace属性为Mapper接口全类名一致。 XML映射文件中sql语句的id与Mapper接口中的方法名一致&…

Spring面试题4:面试官:说一说Spring由哪些模块组成?说一说JDBC和DAO之间的联系和区别?

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:说一说Spring由哪些模块组成? Spring是一个开源的Java框架,由多个模块组成,每个模块都提供不同的功能和特性。下面是Spring框架的主要模块: S…

基于nodejs+vue办公OA公文发文件管理系统

论文的研究内容包括&#xff1a;公文分类、公文信息、待办提醒等方面进行了研究。系统以当前应用最为广泛的nodejs语言为基础&#xff0c;结合了目前应用最为广泛的嵌入式嵌入式平台&#xff0c;集成了B/S体系结构。数据库选择简便高效的MySQL&#xff0c;vue框架。在OA公文发文…