当前位置: 首页 > news >正文

React状态管理:react-redux和redux-saga(适合由vue转到react的同学)

注意:本文不会把所有知识点都写一遍,并不适合纯新手阅读

首先Redux是一种状态管理方案,本身和react并没有什么联系,redux也可以结合其他框架来用。
react-redux是基于react的一种状态管理实现,他不像vuex那样直接内置在create-react-app里,需要自己去安装。

react-redux有三个重要概念,分别是:store,action,reducer。
1.store。store就是存储全局数据状态的仓库。像这样:

const initState = {xxx1: null,xxx2: null,
};

需要注意的是,state是只读的,意味着我们不能initState.xxx1 = "233"这样去修改store里的数据。
其实,工作的项目里,仓库并不是放在store.js里,store.js里一般是做一些创建store,注册saga的操作,state一般是放在具体模块的reducer.js里(一个模块应该有action.js,reducer.js,saga.js三个文件)

2.action。
上文说了,state是只读的,所以我们只能通过派发action的方式修改store里的数据。
派发action这个说法我一直觉得很拗口,其实就是dispatch action的直译。
action包含两部分:type和payload。
type其实就是action的标识,一个常量的字符串,用来说明这个action是干嘛的,比如说type:"GET_USERNAME",说明这个action是用来获取username的,payload就是参数了,就是调用api需要的参数。
注意:action是派发给store的。

3.reducer。
reducer接收一个state和action,返回一个state。
store在接收到action之后会把action和当前的state传给reducer,然后reducer根据action的type去判断执行什么样的操作,然后返回一个新的state给store,比如:return {...state,name:"接口获取到的username"}

工作流程图如下:

react-redux.png

这个流程还是蛮好懂的,接下来我们来说下reducer要注意的地方。(这里牵扯到我们为什么还要用redux-saga)
reducer必须是一个纯函数
纯函数是指一个函数的返回结果只依赖于该函数传入的参数,而不能产生副作用
副作用是指异步操作,DOM操作等...
好的,没明白是吧,说人话,reducer里是不能进行异步请求的!我们在工作中肯定会调用接口异步获取数据的,这样的话只靠react-redux是无法满足我们的需求的,而redux-saga就是来解决这个问题的。
如果你熟悉vuex,就知道vuex里有mutation和action,其中mutation提交更新数据的方法,只能是同步的,而action中就可以包含异步操作了,而且action提交的是mutation。
mutation和action的关系就近似于reducer和saga的关系:saga里调用接口获取到数据之后再提交action给reducer,最终返回新的state给store的还是reducer。

saga包含watch-saga函数和worker-saga函数,watch-saga用于监听系统派发出来的action,watch-saga一旦监听到了某个action就执行对应的worker-saga,worker-saga里进行异步操作(调用接口请求数据等),拿到数据之后派发第二个action给store,store再把state和action给reducer(至此就和无saga时的流程一样了)。
加入了saga,工作流程发生了变化:
我们注意到工作流中的action有两个,可以理解为第一个action是给watch-saga的,第二个action时异步操作完之后worker-saga给store的。

加入saga后的工作流程如下:

redux-saga.png


喜欢的朋友记得点赞、收藏、关注哦!!!

相关文章:

React状态管理:react-redux和redux-saga(适合由vue转到react的同学)

注意:本文不会把所有知识点都写一遍,并不适合纯新手阅读 首先Redux是一种状态管理方案,本身和react并没有什么联系,redux也可以结合其他框架来用。 react-redux是基于react的一种状态管理实现,他不像vuex那样直接内置在…...

刷题技巧:双指针法的核心思想总结+例题整合+力扣接雨水双指针c++实现

双指针法的核心思想是通过同时操作两个指针来遍历数据结构,通常是数组或链表,以达到优化算法性能的目的。具体来说,双指针法能够减少时间复杂度、空间复杂度,或者简化逻辑结构。以下是双指针法的几个核心思想: ps 下面…...

什么是前端微服务,有何优势

随着互联网技术的发展,传统的单体应用架构已经无法满足复杂业务场景的需求。微服务架构的兴起为后端应用的开发和部署提供了灵活性和可扩展性。与此同时,前端开发也经历了类似的演变,前端微服务作为一种新兴的架构模式应运而生。 一、前端微服…...

小论文写作——02:编故事

一篇论文,可以发水刊,也可以发顶刊顶会,这两者的区别就是一个故事编的好不好。 你的论文ABC,但不能之说有ABC。创新就是看你故事编的怎么样?创新是编出来的。 我们要说:我发现了问题,然后准备…...

GIT企业开发使用介绍

0.认识git git就是一个版本控制器,记录每次的修改以及版本迭代的一个管理系统 至于为什么会有git的出现,主要是为了解决一份代码改了又改,但最后还是要第一版的情况 git 可以控制电脑上所有格式的文档 1.安装git sudo yum install git -y…...

文件上传-前端验证

查看源代码(找验证代码) 1、源代码直接找到验证代码 示例: function checkFileExt(filename){var flag false; //状态var arr ["jpg","png","gif"]; //允许上传的文件//取出上传文件的扩展名var index f…...

ROT加密算法login-RESERVE

ROT算法(字母轮换加密) 也称为Caesar加密,是一种简单的字母替换加密算法。它通过将字母表中的每个字母向后(或向前)移动固定的位置来加密文本。 加密步骤: 选择一个固定的偏移量(通常是1到25之间的整数)&…...

C++ 新特性 | C++20 常用新特性介绍

目录 1、模块(Modules) 2、协程(Coroutines) 3、概念(Concepts) 4、范围(Ranges) 5、三向比较符(three-way comparison) C软件异常排查从入门到精通系列教程(专栏文章列表,欢迎订阅,持续更新...)https…...

Java设计模式之策略模式实践

1、策略接口 /*** 策略接口*/ public interface DemoStrategy {Result execute(); } 2、策略工厂 /*** 策略工厂*/ Component public class DemoFactory {Resourceprivate final Map<String, DemoStrategy> demoStrategy new ConcurrentHashMap<>();public Demo…...

C语言——结构体数组、结构体指针、结构体函数与二级指针

C语言中的结构体&#xff08;struct&#xff09;是一种用户自定义的数据类型&#xff0c;它允许你将不同类型的数据项组合成一个单一的类型。结构体数组则是一种特殊的数组&#xff0c;其元素为结构体类型。这意味着你可以在一个数组中存储多个具有相同结构的记录。 定义结构体…...

【4】策略模式

如上图所示&#xff0c;如果要加入一个新的货币&#xff0c;那么就需要对类中的Calculate函数进行修改&#xff0c;这违背了封闭开放原则。 上图中的方式更加合适&#xff0c;搞一个抽象类&#xff08;方法中可以用多态调用&#xff09;&#xff0c;然后每个货币自己是一个类&a…...

BGP 反射器联邦实验

要求&#xff1a; 1.如图连接网络&#xff0c;合理规划IP地址&#xff0c;AS 200内IGP协议为OSPF 2.R1属于AS 100&#xff1b;R2-R3-R4小AS 234 R5-R6-R7小AS 567&#xff0c;同时声明大AS 200&#xff0c;R8属于AS 300 3.R2-R5 R4-R7 之间为联邦EBGP邻居关系 4.R1-R8之…...

stm32入门学习13-时钟RTC

&#xff08;一&#xff09;时钟RTC stm32内部集成了一个秒计数器RTC&#xff0c;用于显示我们日常的时间&#xff0c;如日期年月日&#xff0c;时分秒等&#xff0c;RTC的主要原理就是进行每秒自增&#xff0c;如果我们知道开始记秒的开始时间&#xff0c;就可以计算现在的日…...

vuex properties of undefined (reading ‘getters‘)

前言&#xff1a; 最近打算用vue 写个音乐播放器&#xff0c;在搞 vuex 的时候遇到一个很神奇报错&#xff1b;vuex 姿势练了千百次了&#xff0c;刚开始的时候我一直以为是代码问题&#xff0c;反复检查了带了&#xff0c;依旧报错。 Error in mounted hook: "TypeError:…...

再谈表的约束

文章目录 自增长唯一键外键 自增长 auto_increment&#xff1a;当对应的字段&#xff0c;不给值&#xff0c;会自动的被系统触发&#xff0c;系统会从当前字段中已经有的最大值1操作&#xff0c;得到一个新的不同的值。通常和主键搭配使用&#xff0c;作为逻辑主键。 自增长的…...

认识一下测试策略与测试方案

目录 测试方案 测试策略 测试策略的内容主要包括 测试技术和工具 测试启动、停止和完成标准 风险分析和应对方案 测试范围 测试角色和职责 测试方法和类型 测试工具 测试层级 测试指标 测试可交付成果 测试方案的内容包括 测试目标 测试范围 测试环境 测试策略…...

Gradle 查看包的依赖关系

在 Terminal 中可以通过 gradle 的命令查看项目中使用的依赖库及其版本&#xff0c;并且可以更加直观的看到各个模块中库之间的依赖关系。同时也可以跟踪并解决与库版本冲突有关的问题。 工具查看 在 Android Studio 中选择 View > Tool Windoors > Gradle 或者直接选择…...

虚幻5|给攻击添加特效

一&#xff0c;打开武器蓝图 选择武器网格体&#xff0c;在细节处找到组件开始重叠&#xff0c;点击 写下以下蓝图&#xff0c;这是最终蓝图&#xff0c;后面会分讲要点 二&#xff0c;actor拥有标签&#xff0c;就是被击打的敌人&#xff0c;我们给actor添加标签 到主界面&am…...

Delphi包管理与依赖:掌握GetIt与DelphiPI的艺术

标题&#xff1a;Delphi包管理与依赖&#xff1a;掌握GetIt与DelphiPI的艺术 在Delphi的广袤生态中&#xff0c;包管理和依赖解决方案是构建大型项目不可或缺的工具。本文将深入探讨Delphi中的两种主要包管理工具&#xff1a;GetIt包管理器和DelphiPI&#xff0c;通过实际代码…...

如何使用unittest和pytest进行python脚本的单元测试

1. 关于unittest和pytest unittest是python内置的支持单元测试的模块&#xff0c;他提供了核心类&#xff0c;TestCase&#xff0c;让单元测试 代码的编写不再是从0开始&#xff0c;不再是作坊式&#xff0c;而是标准化&#xff0c;模板化&#xff0c;工厂化。 pytest是第三方…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

HBuilderX安装(uni-app和小程序开发)

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分&#xff1a; 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...