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

此文章是跟随我上一篇文章《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.rhkb.cn/news/143125.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kubernetes(K8s):未来云原生应用的引擎

文章目录 Kubernetes的核心概念和架构为什么K8s是构建云原生应用的首选工具?云原生应用的好处和挑战容器编排的重要性:Docker和KubernetesKubernetes生态系统:核心组件和附加工具实际应用:企业如何在生产环境中使用K8s未来展望&am…

Flutter实现PS钢笔工具,实现高精度抠图的效果。

演示: 代码: import dart:ui;import package:flutter/material.dart hide Image; import package:flutter/services.dart; import package:flutter_screenutil/flutter_screenutil.dart; import package:kq_flutter_widgets/widgets/animate/stack.dart…

任意文件的上传和下载

1.任意文件下载(高危) 定义 一些网站由于业务需求,往往需要提供文件查看或文件下载功能,但若对用户查看或下载的文件不做限制,则恶意用户就能够查看或下载任意敏感文件,这就是文件查看与下载漏洞。 可以下载…

Kafka 常见问题

文章目录 kafka 如何确保消息的可靠性传输Kafka 高性能的体现利用Partition实现并行处理利用PageCache 如何提高 Kafka 性能调整内核参数来优化IO性能减少网络开销批处理数据压缩降低网络负载高效的序列化方式 kafka 如何确保消息的可靠性传输 消费端弄丢了数据 唯一可能导致…

8、SpringBoot_多环境开发

二、多环境开发 1.概述 概述:开发环境、测试环境、生产环境 分类 开发环境 spring:datasource:druid:url: jdbc:mysql://localhost:3306/springboot_ssmusername: rootpassword: 123456driver-class-name: com.mysql.cj.jdbc.Driver测试环境 spring:datasource:dr…

【PickerView案例10-国旗选择界面02 Objective-C预言】

一、好了,我们继续来实现这个国旗选择界面: 1.它的界面里面,是不是很简单,就一个UIPickerView,就完事儿了 然后,显示的每一行内容呢, 1)一个文字Label 2)一个图片 那大家应该有意识,它返回的应该是一个View,对吧, 代理方法里面,有一个返回View的,viewForRow…

【VUE复习·2】@click 之事件处理与函数(可传参);@click 阻止事件冒泡应用场景;@click 多修饰符应用场景(高级)

总览 1.“事件处理”是什么 2.click 函数参数传递应用 3.click 阻止事件冒泡应用场景 4.click 多修饰符应用场景(高级) 一、“事件处理”是什么 1.概念 我们在和页面进行交互时,进行点击或滑动或其他动作时,我们操作的是 DOM …

Ajax

一、什么是Ajax <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-wid…

[python 刷题] 853 Car Fleet

[python 刷题] 853 Car Fleet 哎……周赛第三题解应该用 monotonic stack 做优化的&#xff0c;没写出来&#xff0c;所以多刷两题 monotonic stack 的题目找找感觉…… 题目&#xff1a; There are n cars going to the same destination along a one-lane road. The destin…

MybatisPlus自定义SQL用法

1、功能概述&#xff1f; MybatisPlus框架提供了BaseMapper接口供我们使用&#xff0c;大大的方便了我们的基础开发&#xff0c;但是BaseMapper中提供的方法很多情况下不够用&#xff0c;这个时候我们依旧需要自定义SQL,也就是跟mybatis的用法相同&#xff0c;自定义xml映射文…

win11+wsl+git+cmake+x86gcc+armgcc+clangformat+vscode环境安装

一、安装wsl &#xff08;1&#xff09;打开power shell 并运行&#xff1a; Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux Enable-WindowsOptionalFeature -Online -FeatureName VirtualMachinePlatform &#xff08;2&#xff0…

APP开发费用估算方法

估算APP开发费用是一个重要的项目管理步骤&#xff0c;它有助于确定项目的总成本&#xff0c;并帮助您在项目规划阶段做出决策。APP开发费用估算的方法可以根据项目的规模、复杂性、功能和技术选择而异&#xff0c;以下是一些常见的APP开发费用估算方法&#xff0c;希望对大家有…

tailwind使用教程以及tailwind不生效的问题

以Vite项目为例 我们先安装依赖文件 生成文件 yarn add -D tailwindcss postcss autoprefixer npx tailwindcss init -p配置tailwind.config.js文件 /** type {import(tailwindcss).Config} */ export default {content: ["./index.html","./src/**/*.{vue,j…

Win/Mac版Scitools Understand教育版申请

这里写目录标题 前言教育版申请流程教育账号申请 前言 上篇文章为大家介绍了Scitools Understand软件&#xff0c;通过领取的反馈来看有很多朋友都想用这个软件&#xff0c;但是我的网盘里只存了windows的pojie版&#xff0c;没有mac版的&#xff0c;我没有去网上找相关的资源…

【00】FISCO BCOS区块链简介

官方文档&#xff1a;https://fisco-bcos-documentation.readthedocs.io/zh_CN/latest/docs/introduction.html FISCO BCOS是由国内企业主导研发、对外开源、安全可控的企业级金融联盟链底层平台&#xff0c;由金链盟开源工作组协作打造&#xff0c;并于2017年正式对外开源。 F…

用PHP实现极验验证功能

极验验证是一种防机器人的验证机制&#xff0c;可以通过图像识别等方式来判断用户是否为真实用户。在实现极验验证功能时&#xff0c;您需要进行以下步骤&#xff1a; 1 注册极验账号&#xff1a; 首先&#xff0c;您需要在极验官网注册账号并创建一个应用&#xff0c;获取相应…

机器学习,深度学习

一 、Numpy 1.1 安装numpy 2.2 Numpy操作数组 jupyter扩展插件&#xff08;用于显示目录&#xff09; 1、pip install jupyter_contrib_nbextensions -i https://pypi.tuna.tsinghua.edu.cn/simple 2、pip install jupyter_nbextensions_configurator -i https://pypi.tuna.t…

机器人过程自动化(RPA)入门 4. 数据处理

到目前为止,我们已经了解了RPA的基本知识,以及如何使用流程图或序列来组织工作流中的步骤。我们现在了解了UiPath组件,并对UiPath Studio有了全面的了解。我们用几个简单的例子制作了我们的第一个机器人。在我们继续之前,我们应该了解UiPath中的变量和数据操作。它与其他编…

Visual Studio 如何删除多余的空行,仅保留一行空行

1.CtrlH 打开替换窗口&#xff08;注意选择合适的查找范围&#xff09; VS2010: VS2017、VS2022: 2.复制下面正则表达式到上面的选择窗口&#xff1a; VS2010: ^(\s*)$\n\n VS2017: ^(\s*)$\n\n VS2022:^(\s*)$\n 3.下面的替换窗口皆写入 \n VS2010: \n VS2017: \n VS2022: \n …

C语言每日一题(9):跳水比赛猜名次

文章主题&#xff1a;跳水比赛猜名次&#x1f525;所属专栏&#xff1a;C语言每日一题&#x1f4d7;作者简介&#xff1a;每天不定时更新C语言的小白一枚&#xff0c;记录分享自己每天的所思所想&#x1f604;&#x1f3b6;个人主页&#xff1a;[₽]的个人主页&#x1f3c4;&am…