React 全栈体系（十三）

第七章 redux

五、redux 异步编程

1. 理解

  • redux 默认是不能进行异步处理的,
  • 某些时候应用中需要在 redux 中执行异步任务(ajax, 定时器)

2. 使用异步中间件

  • npm install --save redux-thunk

3. 代码 - 异步 action 版

3.1 store
/* src/redux/store.js */
/*** 该文件专门用于暴露一个store对象，整个应用只有一个store对象*/
//引入createStore，专门用于创建redux中最为核心的store对象
import { createStore, applyMiddleware } from "redux";
//引入为Count组件服务的reducer
import countReducer from "./count_reducer";
//引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'
//暴露store
export default createStore(countReducer, applyMiddleware(thunk));
3.2 count_action
/* src/redux/count_action.js */
/*** 该文件专门为Count组件生成action对象*/
import { INCREMENT, DECREMENT } from "./constant";//同步action，就是指action的值为Object类型的一般对象
export const createIncrementAction = (data) => ({ type: INCREMENT, data });
export const createDecrementAction = (data) => ({ type: DECREMENT, data });//异步action，就是指action的值为函数，异步action中一般都会调用同步action，异步action不是必须要用的
export const createIncrementAsyncAction = (data, time) => {return (dispatch) => {setTimeout(() => {dispatch(createIncrementAction(data));}, time);};
};
3.3 Count
/* src/components/Count/index.jsx */
import React, { Component } from "react";
//引入store，用于获取redux中保存状态
import store from "../../redux/store";
//引入actionCreator，专门用于创建action对象
import {createDecrementAction,createIncrementAction,createIncrementAsyncAction,
} from "../../redux/count_action";export default class Count extends Component {//加法increment = () => {const { value } = this.selectNumber;store.dispatch(createIncrementAction(value * 1));};//减法decrement = () => {const { value } = this.selectNumber;store.dispatch(createDecrementAction(value * 1));};//奇数加incrementIfOdd = () => {const { value } = this.selectNumber;const count = store.getState();if (count % 2 !== 0) {store.dispatch(createIncrementAction(value * 1));}};//异步加incrementAsync = () => {const { value } = this.selectNumber;store.dispatch(createIncrementAsyncAction(value * 1, 500));};render() {return (<div><h1>当前求和为：{store.getState()}</h1><select ref={(c) => (this.selectNumber = c)}><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>&nbsp;<button onClick={this.increment}>+</button>&nbsp;<button onClick={this.decrement}>-</button>&nbsp;<button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;<button onClick={this.incrementAsync}>异步加</button></div>);}
}
3.4 总结
(1).明确：延迟的动作不想交给组件自身，想交给action
(2).何时需要异步action：想要对状态进行操作，但是具体的数据靠异步任务返回。
(3).具体编码：1).yarn add redux-thunk，并配置在store中2).创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务。3).异步任务有结果后，分发一个同步的action去真正操作数据。
(4).备注：异步action不是必须要写的，完全可以自己等待异步任务的结果了再去分发同步action。

六、react-redux

在这里插入图片描述

1. 理解

  • 一个 react 插件库
  • 专门用来简化 react 应用中使用 redux

2. react-Redux 将所有组件分成两大类

2.1 UI 组件
  • 只负责 UI 的呈现，不带有任何业务逻辑
  • 通过 props 接收数据(一般数据和函数)
  • 不使用任何 Redux 的 API
  • 一般保存在 components 文件夹下
2.2 容器组件
  • 负责管理数据和业务逻辑，不负责 UI 的呈现
  • 使用 Redux 的 API
  • 一般保存在 containers 文件夹下
2.3 相关 API
2.3.1 Provider：让所有组件都可以得到 state 数据
<Provider store={store}><App />
</Provider>
2.3.2 connect：用于包装 UI 组件生成容器组件
import { connect } from 'react-redux'connect(mapStateToprops,mapDispatchToProps)(Counter)
2.3.3 mapStateToprops：将外部的数据（即 state 对象）转换为 UI 组件的标签属性
const mapStateToprops = function (state) {return {value: state}
}
2.3.4 mapDispatchToProps：将分发 action 的函数转换为 UI 组件的标签属性

3. 代码 - react-redux 的基本使用

  • 安装：npm install react-redux
3.1 index
/* src/index.js */
//引入react核心库
import React from "react";
//引入ReactDOM
import ReactDOM from "react-dom";
//引入App组件
import App from "./App";
import store from "./redux/store";ReactDOM.render(<App />, document.getElementById("root"));
//监测redux中状态的改变，如redux的状态发生了改变，那么重新渲染App组件
store.subscribe(() => {ReactDOM.render(<App />, document.getElementById("root"));
});
3.2 App
/* src/App.jsx */
import React, { Component } from "react";
import Count from "./containers/Count";
import store from "./redux/store";export default class App extends Component {render() {return (<div>{/* 给容器组件传递store */}<Count store={store} /></div>);}
}
3.3 Count(Component)
/* src/components/Count/index.jsx */
import React, { Component } from "react";export default class Count extends Component {//加法increment = () => {const { value } = this.selectNumber;this.props.jia(value * 1);};//减法decrement = () => {const { value } = this.selectNumber;this.props.jian(value * 1);};//奇数加incrementIfOdd = () => {const { value } = this.selectNumber;if (this.props.count % 2 !== 0) {this.props.jia(value * 1);}};//异步加incrementAsync = () => {const { value } = this.selectNumber;this.props.jiaAsync(value * 1, 500);};render() {return (<div><h1>当前求和为：{this.props.count}</h1><select ref={(c) => (this.selectNumber = c)}><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>&nbsp;<button onClick={this.increment}>+</button>&nbsp;<button onClick={this.decrement}>-</button>&nbsp;<button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;<button onClick={this.incrementAsync}>异步加</button></div>);}
}
3.4 Count(Container)
/* src/containers/Count/index.jsx */
//引入Count的UI组件
import CountUI from "../../components/Count";
import {createIncrementAction,createDecrementAction,createIncrementAsyncAction,
} from "../../redux/count_action";//引入connect用于连接UI组件与redux
import { connect } from "react-redux";/*1.mapStateToProps函数返回的是一个对象；2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value3.mapStateToProps用于传递状态
*/
function mapStateToProps(state) {return { count: state };
}/*1.mapDispatchToProps函数返回的是一个对象；2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value3.mapDispatchToProps用于传递操作状态的方法
*/
function mapDispatchToProps(dispatch) {return {jia: (number) => dispatch(createIncrementAction(number)),jian: (number) => dispatch(createDecrementAction(number)),jiaAsync: (number, time) =>dispatch(createIncrementAsyncAction(number, time)),};
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateToProps, mapDispatchToProps)(CountUI);
3.5 总结
(1).明确两个概念：1).UI组件:不能使用任何redux的api，只负责页面的呈现、交互等。2).容器组件：负责和redux通信，将结果交给UI组件。
(2).如何创建一个容器组件————靠 react-redux 的 connect函数connect(mapStateToProps,mapDispatchToProps)(UI组件)-mapStateToProps:映射状态，返回值是一个对象-mapDispatchToProps:映射操作状态的方法，返回值是一个对象
(3).备注1：容器组件中的store是靠props传进去的，而不是在容器组件中直接引入
(4).备注2：mapDispatchToProps，也可以是一个对象

4. 代码 - 优化 1：简写 mapDispatch

Count(Container)
/* src/containers/Count/index.jsx */
//引入Count的UI组件
import CountUI from "../../components/Count";
import {createIncrementAction,createDecrementAction,createIncrementAsyncAction,
} from "../../redux/count_action";//引入connect用于连接UI组件与redux
import { connect } from "react-redux";//使用connect()()创建并暴露一个Count的容器组件
export default connect((state) => ({ count: state }), {jia: createIncrementAction,jian: createDecrementAction,jiaAsync: createIncrementAsyncAction,
})(CountUI);

5. 代码 - 优化 2：Provider 组件的使用

5.1 index
/* src/index.js */
//引入react核心库
import React from "react";
//引入ReactDOM
import ReactDOM from "react-dom";
//引入App组件
import App from "./App";
import store from "./redux/store";
import { Provider } from "react-redux";ReactDOM.render(<Provider store={store}><App /></Provider>,document.getElementById("root")
);
5.2 App
/* src/App.jsx */
import React, { Component } from "react";
import Count from "./containers/Count";export default class App extends Component {render() {return (<div><Count /></div>);}
}

6. 代码 - 优化 3：整合 UI 组件和容器组件

6.1 Count(Container)
/* src/containers/Count/index.jsx */
import React, { Component } from "react";
import {createIncrementAction,createDecrementAction,createIncrementAsyncAction,
} from "../../redux/count_action";//引入connect用于连接UI组件与redux
import { connect } from "react-redux";// 定义UI组件
class Count extends Component {//加法increment = () => {const { value } = this.selectNumber;this.props.jia(value * 1);};//减法decrement = () => {const { value } = this.selectNumber;this.props.jian(value * 1);};//奇数加incrementIfOdd = () => {const { value } = this.selectNumber;if (this.props.count % 2 !== 0) {this.props.jia(value * 1);}};//异步加incrementAsync = () => {const { value } = this.selectNumber;this.props.jiaAsync(value * 1, 500);};render() {return (<div><h1>当前求和为：{this.props.count}</h1><select ref={(c) => (this.selectNumber = c)}><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>&nbsp;<button onClick={this.increment}>+</button>&nbsp;<button onClick={this.decrement}>-</button>&nbsp;<button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;<button onClick={this.incrementAsync}>异步加</button></div>);}
}//使用connect()()创建并暴露一个Count的容器组件
export default connect((state) => ({ count: state }), {jia: createIncrementAction,jian: createDecrementAction,jiaAsync: createIncrementAsyncAction,
})(Count);
6.2 总结
(1).容器组件和UI组件整合一个文件
(2).无需自己给容器组件传递store，给<App/>包裹一个<Provider store={store}>即可。
(3).使用了react-redux后也不用再自己检测redux中状态的改变了，容器组件可以自动完成这个工作。
(4).mapDispatchToProps也可以简单的写成一个对象
(5).一个组件要和redux“打交道”要经过哪几步？(1).定义好UI组件---不暴露(2).引入connect生成一个容器组件，并暴露，写法如下：connect(state => ({key:value}), //映射状态{key:xxxxxAction} //映射操作状态的方法)(UI组件)(3).在UI组件中通过this.props.xxxxxxx读取和操作状态

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

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

大型集团借力泛微搭建语言汇率时区统一、业务协同的国际化OA系统

大型集团借力泛微搭建语言汇率时区统一、业务协同的国际化OA系统

国际化、全球化集团&#xff0c;业务遍布全世界&#xff0c;下属公司众多&#xff0c;集团对管理方式和企业文化塑造有着很高的要求。不少大型集团以数字化方式助力全球统一办公&#xff0c;深化企业统一管理。 面对大型集团全球化的管理诉求&#xff0c;数字化办公系统作为集…
阅读更多...
Matlab图像处理-模式识别

Matlab图像处理-模式识别

模式识别 模式识别就是用计算的方法根据样本的特征将样本划分到一定的类别中去。模式识别就是通过计算机用数学技术方法来研究模式的自动处理和判读&#xff0c;把环境与客体统称为“模式”。模式识别以图像处理与计算机视觉、语音语言信息处理、脑网络组、类脑智能等为主要研…
阅读更多...
电脑桌面透明便签软件是哪个？

电脑桌面透明便签软件是哪个？

在现代快节奏的工作环境中&#xff0c;许多上班族都希望能够在电脑桌面上方便地记录工作资料、重要事项、工作流程等内容。为了解决这个问题&#xff0c;一款优秀的电脑桌面便签软件是必不可少的。在选择桌面便签软件时&#xff0c;许多用户也希望便签软件能够与电脑桌面壁纸相…
阅读更多...
“淘宝” 开放平台接口设计思路（内附API接口免费接入地址）

“淘宝” 开放平台接口设计思路（内附API接口免费接入地址）

最近对接的开放平台有点多&#xff0c;像淘宝、天猫、京东、拼多多、快手、抖音等电商平台的开放平台基本对接了个遍&#xff0c;什么是CRUD BODY也许就是这样的吧&#xff01;&#xff01;&#xff01; 经过这几天的整理&#xff0c;脑子里大概有了个开放平台接口的设计套路&…
阅读更多...
Linux Ubuntu命令行快速配置C++开发环境

Linux Ubuntu命令行快速配置C++开发环境

本文介绍在Linux操作系统的Ubuntu版本中&#xff0c;基于命令行&#xff0c;快速配置C 编辑、编译、运行的代码开发环境的简便方法。 在之前的文章Linux操作系统Ubuntu 22.04配置Visual Studio Code与C代码开发环境的方法(https://blog.csdn.net/zhebushibiaoshifu/article/det…
阅读更多...
版本控制系统git：一文了解git，以及它在生活中的应用，网站维护git代码，图导，自动化部署代码

版本控制系统git：一文了解git，以及它在生活中的应用，网站维护git代码，图导，自动化部署代码

目录 1.Git是什么 2.git在生活中的应用 2.1git自动化部署代码 3.网站维护git代码 3.1如何在Git代码托管平台等上创建一个仓库 3.2相关文章 4.ruby实现基础git 4.1.Git add 4.2 Git commit 4.3 Git log 1.Git是什么 Git是一个版本控制系统&#xff0c;它可以追踪文件的…
阅读更多...
多边形碰撞检测算法

多边形碰撞检测算法

1、AABB碰撞检测算法 AABB碰撞检测指轴对齐碰撞箱(Axis-aligned Bounding Box)&#xff0c;是分别从x轴向和y轴向进行碰撞检测的算法。即对于需要检测的物体A和物体B我们需要将其用A盒和B盒套起来&#xff0c;判断A盒和B盒在x轴向和y轴向是否发生碰撞&#xff0c;只有在x轴向和…
阅读更多...
软件需求文档、设计文档、开发文档、运维文档大全

软件需求文档、设计文档、开发文档、运维文档大全

在软件开发过程中&#xff0c;文档扮演着至关重要的角色。它不仅记录了项目的需求、设计和开发过程&#xff0c;还为项目的维护和管理提供了便利。本文将详细介绍软件开发文档的重要性和作用&#xff0c;以及需求分析、软件设计、开发过程、运维管理和项目管理等方面的文档要求…
阅读更多...
Flink--4、DateStream API（执行环境、源算子、基本转换算子）

Flink--4、DateStream API（执行环境、源算子、基本转换算子）

星光下的赶路人star的个人主页 注意力的集中&#xff0c;意象的孤立绝缘&#xff0c;便是美感的态度的最大特点 文章目录 1、DataStream API1.1 执行环境&#xff08;Execution Environment&#xff09;1.1.1 创建执行环境 1.2 执行模式&#xff08;Execution Mode&#xff09;…
阅读更多...
十六）Stable Diffusion教程：出图流程化

十六）Stable Diffusion教程：出图流程化

今天说一个流程化出图的案例&#xff0c;适用很多方面。 1、得到线稿&#xff0c;自己画或者图生图加线稿lora出线稿&#xff1b;如果想sd出图调整参数不那么频繁细致&#xff0c;则线稿的素描关系、层次、精深要表现出来&#xff0c;表现清楚。 2、文生图&#xff0c;seed随机…
阅读更多...
Android中的缓存策略：LruCache和DiskLruCache

Android中的缓存策略：LruCache和DiskLruCache

Android中的缓存策略&#xff1a;LruCache和DiskLruCache 导言 本篇文章主要是介绍Android中内置的两个缓存类的原理。所谓缓存&#xff0c;就是将获取的数据保存下来以便下次继续使用&#xff0c;这种技术尤其在网络请求和图片加载中有用&#xff0c;可以显著地提升App的性能…
阅读更多...
原生js的animate()方法详解

原生js的animate()方法详解

1.介绍 Element 接口的 animate() 方法是创建一个新的 Animation 的便捷方法&#xff0c;将它应用于元素&#xff0c;然后运行动画。它将返回一个新建的 Animation 对象实例。 同时通过Element.getAnimations() 方法可获取元素所有的Animation实例。 2.语法 Element.animate…
阅读更多...
【PLC GX Works2】创建一个工程

【PLC GX Works2】创建一个工程

PLC GX Works2软件安装 https://www.jcpeixun.com/software/375 程序编写 1、工程中找到新建 2、新建 3、导航栏中选择第三行第一个&#xff0c;是全局软元件注释 4、修改软元件名x0为点动按钮&#xff0c;y1为电机&#xff0c;之后关闭即可。 5、左母线&#xff0c;右…
阅读更多...
Spring Security 的身份验证绕过漏洞CVE-2023-34035

Spring Security 的身份验证绕过漏洞CVE-2023-34035

文章目录 0.前言漏洞漏洞介绍描述 1.参考文档2.基础介绍2.1 组件简介&#xff1a;2.2 漏洞简介&#xff1a; 3.解决方案3.1. 升级版本 0.前言 背景&#xff1a;公司收到关于 Spring Security 的一个身份验证绕过漏洞的通知&#xff0c;该漏洞被标识为 CVE-2023-34035 漏洞 高 …
阅读更多...
【大数据开发技术】实验01-Hadoop安装部署

【大数据开发技术】实验01-Hadoop安装部署

文章目录 Hadoop安装部署一、实验目标二、实验要求三、实验内容四、实验步骤 Hadoop安装部署 虚拟机数量&#xff1a;3 系统版本&#xff1a;Centos 7.5 Hadoop版本&#xff1a; Apache Hadoop 2.7.3 主节点信息&#xff1a; 操作系统&#xff1a;CentOS7.5 软件包位置&…
阅读更多...
【机器学习】回归问题实例（李宏毅老师作业1）

【机器学习】回归问题实例（李宏毅老师作业1）

文章目录 任务介绍完成和调参 任务介绍 问题描述 给出美国某一州过去3天的调查结果&#xff0c;然后预测第3天新检测阳性病例的百分比。 数据相关特征feature States&#xff08;34&#xff0c; encode to one-hot vectors&#xff09; 34个州COVID-like illness&#xff0…
阅读更多...
2101. 引爆最多的炸弹；752. 打开转盘锁；1234. 替换子串得到平衡字符串

2101. 引爆最多的炸弹；752. 打开转盘锁；1234. 替换子串得到平衡字符串

2101. 引爆最多的炸弹 核心思想&#xff1a;枚举BFS。枚举每个炸弹最多引爆多少个炸弹&#xff0c;对每个炸弹进行dfs&#xff0c;一个炸弹能否引爆另一个炸弹是两个炸弹的圆心距离在第一个炸弹的半径之内。 752. 打开转盘锁 核心思想:典型BFS&#xff0c;就像水源扩散一样&a…
阅读更多...
打造本地紧密链接的开源社区——KCC@长沙开源读书会openKylin爱好者沙龙圆满举办...

打造本地紧密链接的开源社区——KCC@长沙开源读书会openKylin爱好者沙龙圆满举办...

2023年9月9日&#xff0c;由开源社联合 openKylin 社区举办的 KCC长沙开源读书会&openKylin 爱好者沙龙&#xff0c;在长沙圆满举办。这是 KCC长沙首次正式进入公众视野&#xff0c;开展开源交流活动&#xff0c;也是 openKylin 社区长沙首场线下沙龙。长沙地区及其周边的众…
阅读更多...
期刊目录解析 | 慎投！又2本“On Hold”SCI期刊被踢！

期刊目录解析 | 慎投！又2本“On Hold”SCI期刊被踢！

科睿唯安官方目前对SCI期刊的管理可以说是相当严格的&#xff0c;每个月都会出评估报告&#xff0c;如果任何一本期刊有问题&#xff0c;就会先被“On Hold”&#xff0c;这代表需要重新评估是否符合SCI标准&#xff0c;有可能直接被剔除。 此前&#xff0c;小编也为大家统计了…
阅读更多...
Pdf文件签名检查

Pdf文件签名检查

如何检查pdf的签名 首先这里有一个已经签名的pdf文件&#xff0c;通过pdf软件可以看到文件的数字签名。 图1为签名后的文件&#xff0c;图2为签名后文件被篡改。 下面就是如何代码检查这里pdf文件的签名 1.引入依赖 <dependency><groupId>org.projectlombok<…
阅读更多...
最新文章

Copyright @ 2022~2023