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


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

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

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

相关文章

Centos 7 升级GCC时遇到 mirrorlist.centos.org; Unknown error“

问题描述 在执行如下操作的时候, yum install devtoolset-9-gcc devtoolset-9-gcc-c devtoolset-9-binutils 出现: 14: curl#6 - "Could not resolve host: mirrorlist.centos.org; Unknown error" 网上搜索了一下,原因是 mir…

全开源智慧停车场微信小程序源码/智能停车系统源码/停车自助缴费系统/停车场管理收费+物业管理+物联网+自助缴费功能

源码简介: 智慧停车场微信小程序源码,全开源智能停车系统源码,停车自助缴费系统,具有停车场管理、停车收费、物业管理、物联网、自助缴费等多种功能。 这是一个全开源的智能停车系统,功能强大。它不仅能帮你管理停车…

YOLO目标检测的单目(多目标测距),使用相机光学模型,支持目标检测模型训练,可输出目标位置和距离信息并可视化

本项目旨在开发一个基于YOLO的目标检测系统,该系统不仅能检测图像中的多个目标,还能利用单目摄像头的图像估计每个目标与摄像头之间的相对距离。系统的核心组成部分包括目标检测、距离估计、模型训练以及结果可视化。 主要功能 目标检测:使用…

后台管理权限自定义按钮指令v-hasPermi

第一步:在src下面建立一个自定义指令文件,放自定义指令方法 permission.js文件: /*** v-hasPermi 操作权限处理*/import store from "/store";export default {inserted(el, binding) {const { value } binding;//从仓库里面获取到后台给的数组const permission s…

【PGCCC】使用 Postgres 递归 CTE 进行图形检索

您是否知道可以将 Postgres 用作某些用例的图形数据库? 假设您有如下图表: 我们可以在 NetworkX 中构建此图: 1import networkx as nx23G nx.Graph()45G.add_edges_from([6 ("A", "B"),7 ("A", "…

Python 安装 PyTorch详细教程

本章教程,介绍如何安装PyTorch,介绍两种安装方式,一种是通过pip直接安装,一种是通过conda方式安装。 一、查看CUDA版本 二、安装PyTorch 1、pip安装方式 pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cu1162、conda安装方式 …

PHP移动端商城分销全平台全端同步使用

📱【掌中购物新纪元:探索移动端购物商城系统的无限魅力】🛍️ 🚀 随时随地,购物自由新体验 在这个快节奏的时代,移动端购物商城系统彻底颠覆了传统购物方式,让消费者享受到了前所未有的便捷与…

【Linux】

一.前言 思考1:命令的基本组成 command [-options] [paramter] 说明: command:命令 options:命令选项 paramter:命令的操作对象 []:表示可选 思考2:查阅命令帮助信息 command --help …

依赖倒置原则:构建灵活软件架构的基石 - 通过代码实例深入解析

1.引言 1.1为什么要学习依赖倒置原则 在软件开发过程中,我们经常需要对代码进行修改和扩展。如果代码之间的耦合度过高,那么在进行修改或扩展时,可能会对其他部分的代码产生影响,甚至引发错误。这就要求我们在编写代码时&#xf…

【rh】rh项目部署

【fastadmin】 1、项目先clone到本地,其中web为h5前端使用(gitclone后,把web内容放进去再提交),其余为项目后端使用 2、安装本地环境,项目跑起来,步骤如下: 1)查春.git 和 composer,json 版本信…

ubuntu22.04不生成core文件

一、检查服务器的core文件是否打开 ulimit -a //查看时候打开core 如果core file size 是0就是关闭的!服务一般都是关闭的!将他打开即可! ulimit -c size//设置core file的大小,自定义 此时打开就可以生成了core文件了&#xff…

工业互联网边缘计算实训室解决方案

一、引言 随着物联网(IoT)、5G通信技术的快速发展,工业互联网已成为推动制造业转型升级的重要力量。边缘计算作为云计算的延伸和补充,在实时数据分析、降低数据传输延迟、提升处理效率及增强数据安全性方面展现出巨大潜力。在此背…

【安卓】多线程编程

文章目录 线程的简单应用解析异步消息处理机制使用AsyncTask 线程的简单应用 新建一个AndroidThreadTest项目&#xff0c;然后修改activity_main.xml中的代码。 <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width…

Vue 3+Vite+Eectron从入门到实战系列之(六)一工作台界面开发及实现响应式

工作台&#xff0c;是每个后台系统必备的&#xff0c;也是管理系统的首页。这次我们来实现一个工作台&#xff0c;并适配他的响应性 实现效果 代码实现 <template><div class"dashboard"><el-row :gutter"20"><el-col class"mb…

flink车联网项目前篇:建模设计(第65天)

系列文章目录 2.2 维度建模 2.2.1 维度表 2.2.2 事实表 2.2.3 维度建模的三种模型 3. 建模设计 3.1 ODS层 3.2 DWD层 3.3 DWS层 3.4 ADS层 文章目录 系列文章目录前言2.2 维度建模2.2.1 维度表2.2.2 事实表2.2.3 维度建模的三种模型 3. 建模设计3.1 ODS层3.2 DWD层3.3 DWS层3.…

基于ssm+vue+uniapp的停车场小程序的设计与实现

开发语言&#xff1a;Java框架&#xff1a;ssmuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;M…

sql语句优化(mysql select语句)-索引方式

1、上图是mysql user表的一小部分数据,一共有: 100万条数据 2、假如现在需要查询name列的某一条数据&#xff08;name‘user3’&#xff09; 3、下图是查询优化器评估的最佳方案&#xff0c;索引我删除了还走索引&#xff0c;还他呀的在&#xff0c;奇怪&#xff0c;就先不研究…

Review Learning : 推进一体化超高清图像恢复训练方法

Review Learning: Advancing All-in-One Ultra-High-Definition Image Restoration Training Method 摘要 一体化图像恢复任务变得越来越重要&#xff0c;特别是对于超高清&#xff08;UHD&#xff09;图像。 现有的一体机UHD图像恢复方法通常通过引入针对不同退化类型的即时…

Python,Spire.Doc模块,处理word、docx文件,极致丝滑

Python处理word文件&#xff0c;一般都是推荐的Python-docx&#xff0c;但是只写出一个&#xff0c;一句话的文件&#xff0c;也没有什么样式&#xff0c;就是36K。 再打开word在另存一下&#xff0c;就可以到7-8k&#xff0c;我想一定是python-docx的问题&#xff0c;但一直没…

加和分数、训练、测试

一、加和所有alignment的分数 1、路线图中 2、l_i只与token有关&#xff0c;有一个专门训练的网络&#xff1b;h_i变化只与null有关 3、distribution生成的概率不受路径影响&#xff0c;只要到达位置概率就是一样的 4、计算alignment分数的总和 &#xff08;1&#xff09;αi…