【前端知识】React 基础巩固(三十三)——Redux的使用详解

React 基础巩固(三十三)——Redux的使用详解

Redux的使用详解

  1. 针对React 基础巩固(三十二)中的案例,我们希望抽取页面中共有的代码(例如下方的代码),使用高阶组件统一拦截。

    constructor() {super();this.state = {counter: store.getState().counter,};
    }
    componentDidMount() {store.subscribe(() => {const state = store.getState();this.setState({counter: state.counter,});});
    }
    
  2. 为了让react和redux产生联系,安装一款工具react-redux

    npm install react-redux
    
  3. 使用react-redux ,在index.js中统一注入store

    import React from "react";
    import ReactDOM from "react-dom/client";
    import App from "./App";
    import { Provider } from "react-redux";
    import store from './store'const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(<React.StrictMode><Provider store={store}><App /></Provider>
    </React.StrictMode>
    );
  4. 新建about.js页面,通过react-redux引入store

    import React, { PureComponent } from "react";
    import { connect } from "react-redux";export class about extends PureComponent {render() {const { counter } = this.props;return (<div><div>About: {counter}</div></div>);}
    }// connect()的返回值是一个高阶函数
    const mapStateToProps = (state) => ({counter: state.counter,
    });export default connect(mapStateToProps)(about);
  5. 在App.jsx中引入新的about.jsx页面,查看运行效果

    import React, { PureComponent } from "react";
    import Home from "./pages/home";
    import Profile from "./pages/profile";
    import About from "./pages/about";
    import "./style.css";
    import store from "./store";export class App extends PureComponent {constructor() {super();this.state = {counter: store.getState().counter,};}componentDidMount() {store.subscribe(() => {const state = store.getState();this.setState({counter: state.counter,});});}render() {const { counter } = this.state;return (<div><h2>App Counter: {counter}</h2><div className="pages"><Home /><Profile /><About /></div></div>);}
    }export default App;

运行效果
6. 继续优化代码,利用react-redux中的connect对state和dispatch进行解耦。在基础巩固(三二)中的home.jsx页面中,state和dispatch如下表示:

import React, { PureComponent } from "react";
import store from "../store";
import { addNumberAction } from "../store/actionCreators";
export class home extends PureComponent {constructor() {super();this.state = {counter: store.getState().counter,};}componentDidMount() {store.subscribe(() => {const state = store.getState();this.setState({counter: state.counter,});});}addNumber(num) {store.dispatch(addNumberAction(num));}render() {const { counter } = this.state;return (<div>home counter:{counter}<div><button onClick={(e) => this.addNumber(1)}>+1</button><button onClick={(e) => this.addNumber(5)}>+5</button><button onClick={(e) => this.addNumber(8)}>+8</button></div></div>);}
}export default home;

为了将页面与store解耦,在about.jsx中,我们不再使用home.jsx的方式使用state和dispatch,优化如下:

import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { addNumberAction, subNumberAction } from "../store/actionCreators";export class about extends PureComponent {calcNumber(num, isAdd) {if (isAdd) {this.props.addNumber(num);} else {this.props.subNumber(num);}}render() {const { counter } = this.props;return (<div><h2>About: {counter}</h2><div><button onClick={(e) => this.calcNumber(6, true)}>+6</button><button onClick={(e) => this.calcNumber(6, false)}>-6</button><button onClick={(e) => this.calcNumber(8, true)}>+8</button><button onClick={(e) => this.calcNumber(8, false)}>-8</button></div></div>);}
}// connect()的返回值是一个高阶函数
// 映射state到props
const mapStateToProps = (state) => ({counter: state.counter,
});// 映射dispatch到props
const mapDispatchToProps = (dispatch) => ({addNumber(num) {dispatch(addNumberAction(num));},subNumber(num) {dispatch(subNumberAction(num));},
});export default connect(mapStateToProps, mapDispatchToProps)(about);
  1. 查看运行结果
    运行结果

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

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

相关文章

2023-07-25 monetdb-relation-关键数据结构-记录

摘要: monetdb-relation-关键数据结构-记录 关键数据结构: expression_type typedef enum expression_type {e_atom,e_column,e_cmp,e_func,e_aggr,e_convert,e_psm } expression_type; expression typedef struct expression {expression_type type; /* atom, cmp, func/aggr…

搜集了一些题

kafka为什么会重复消费消息? 在kafka提交offset的时候,可能由网络延迟或者某些原因导致,offset没有同步,导致其他consumer消费了已经消费的消息 kafka如何实现顺序消费? kafak的话需要将顺序消费的消息通过指定分区策略发送到指定的partition中 如果了解rocketMq的话,可以顺带…

Packet Tracer – 配置动态 NAT

Packet Tracer – 配置动态 NAT 拓扑图 目标 第 1 部分&#xff1a;配置动态 NAT 第 2 部分&#xff1a;验证 NAT 实施 第 1 部分&#xff1a; 配置动态 NAT 步骤 1&#xff1a; 配置允许的流量。 在 R2 上&#xff0c;为 ACL 1 配置一个语句以允许属于 172.16.0.…

【Docker-compose】基于Docker-compose创建LNMP环境并运行Wordpress网站平台

基于Docker compose创建LNMP环境并运行Wordpress网站平台 1.Docker-Compose概述2. YAML文件格式及编写注意事项3. Docker-Compose配置常用字段4.Docker Compose常用命令5.使用Docker-compose创建LNMP环境&#xff0c;并运行Wordpress网站平台5.1 Docker Compose环境安装5.2 使用…

深入解析 SOCKS5 代理与网络安全

一、SOCKS5 代理技术概述 SOCKS5&#xff08;Socket Secure 5&#xff09;代理是 SOCKS 协议的最新版本&#xff0c;它允许客户端在客户端与代理服务器之间建立一个安全通道&#xff0c;并通过此通道发送请求并访问远程服务器。与 HTTP/HTTPS 代理相比&#xff0c;SOCKS5 代理在…

【外键合并python】

外键合并&#xff08;Foreign Key Merge&#xff09; 外键合并是指在数据库或者数据表中&#xff0c;通过共同的外键将多个数据表合并在一起的操作。在 Excel 表格中&#xff0c;我们可以使用外键来将多个表格合并&#xff0c;类似于数据库中的关联操作。 步骤一&#xff1a;…

SpringBoot项目——springboot配置Tomcat两个端口,https和http的方式 jar的打包和运行

目录 引出springboot配置Tomcat两个端口&#xff0c;https和http的方式1.生成SSL证书2.配置client.p12和https端口3.配置http的8080端口WebServerFactoryCustomizer接口4.启动项目 项目应用&#xff1a;在某项目中有一个功能需要https协议Tomcat启动https和http两个端口根据htt…

工业物联网网关让PLC数据手机端监控和报警更加简单

在传统的工厂管理中&#xff0c;我们想要看到现场设备的实时数据&#xff0c;必须在控制室内通过工控机、电脑、触摸屏等这些上位机设备才能看到&#xff0c;同理PLC维护也需要工程师在现场进行编程调试工作&#xff0c;非常不方便。 随着工业物联网的发展&#xff0c;作为设备…

“学习嵌入式开发:明确目标,提升技能“

嵌入式领域涵盖广泛&#xff0c;不可能一次性掌握所有知识。因此&#xff0c;明确学习目标和方向非常重要。选择感兴趣且与职业发展相关的领域进行深入学习是明智之举。 嵌入式技术在不断发展&#xff0c;过去与现在存在差异。选择学习当前行业的主流技术和趋势是明智选择。掌…

抖音矩阵系统源码开发搭建部署分享

一、 功能开发设计 &#xff08;1&#xff09;数据概览&#xff1a;账号&#xff0c;视频top10数据统计 &#xff08;2&#xff09;AI视频创意&#xff1a;原创视频批量剪辑&#xff0c;阶乘算法&#xff0c;去重原理 &#xff08;3&#xff09;同城拓客&#xff1a;线下门店…

【Java基础教程】(四十六)IO篇 · 下:System类对IO的支持:错误输出、信息输出、系统输入,字符缓冲流、扫描流和对象序列化流~

Java基础教程之IO操作 下 &#x1f539;本节学习目标1️⃣ System类对 IO 的支持1.1 错误输出&#xff1a;System.err1.2 信息输出&#xff1a;System.out1.3 系统输入&#xff1a;System. in 2️⃣ 字符缓冲流&#xff1a;BufferedReader3️⃣ 扫描流&#xff1a;Scanner4️⃣…

两个数组的dp问题(2)--动态规划

一)交错字符串: 97. 交错字符串 - 力扣&#xff08;LeetCode&#xff09; 一)确定一个状态标识: 如果我选择s1的一段区间&#xff0c;再进行选择s2得一段区间那么s3这个字符串的长度就已经固定了 预处理:在s1字符串s2字符串和s3字符串前面加上一个虚拟字符&#xff0c;让下标从…

【MyBatis-Plus 进阶学习笔记】

MyBatis-Plus 进阶学习笔记记录 一、 MyBatis Plus 七大功能0. 数据准备1. 逻辑删除2. 自动填充2.1 优化1 自动填充 有的类没有更新和创建时间字段2.2 优化2 自己设置时间时填充自己设置的&#xff0c;不设置时自动填充 3. 乐观锁插件 注&#xff1a;wrapper不能服用4. 性能分析…

网安高级笔记1

html实体编码 HTML实体编码&#xff0c;格式 以&符号开头&#xff0c;以;分号结尾的 HTML 中的预留字符必须被替换为字符实体 在 HTML 中不能使用小于号&#xff08;<&#xff09;和大于号&#xff08;>&#xff09;&#xff0c;这是因为浏览器会误认为它们是…

RFC8470在HTTP中使用早期数据

摘要 使用TLS早期数据会暴露出重放攻击的可能性。本文定义了允许客户端与服务器就早期数据中发送的HTTP请求进行通信的机制。描述了使用这些机制来减轻重放风险的技术。 1. 介绍 TLS 1.3[TLS13]引入了早期数据&#xff08;也称为零往返时间&#xff08;0-RTT&#xff09;数…

ffplay播放器剖析(7)----音视频暂停模块分析

文章目录 1. 暂停触发流程2. toggle_pause3. stream_toggle_pause 1. 暂停触发流程 1.通过SDL触发事件调用toggle_pause 2.toggle_pause调用stream_toggle_pause 3.stream_toggle_pause修改暂停变量 2. toggle_pause static void toggle_pause(VideoState *is) {stream_to…

AI写场景小作文

AI写场景小作文 https://edu.csdn.net/learn/38500/612957?spm3001.4143 函数isNum(n) 参数为字符串属于整数&#xff0c;浮点数&#xff0c;或复数&#xff0c;则输出True,否则输出False def isNum(n):try:neval(n)if type(n)int or type(n)float or type(n)complex:print…

HTML中的焦点管理

前言 焦点作为页面交互中的重要一环&#xff0c;涉及到的知识点也比较多&#xff0c;有必要做一个统一的总结。 HTML 中的可获取焦点的元素 具有 href 属性的 HTMLAnchorElement/HTMLAreaElement非禁用态的 HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLBut…

【VUE】使用elementUI tree组件根据所选id自动回显

需求如下&#xff1a; 1.点击父级节点 将父级节点下children中所有id放入数组 2.点击父级下的子节点 将点击的子节点放入数组 3.取消选择父节点&#xff0c;将放入数组的所有子节点id删除 4.根据选择的子节点数组&#xff0c;匹配他所属的父节点 <el-tree:data"tre…

Docker——compose单机容器集群编排

Docker——compose单机容器集群编排 一、Docker-compose概述1.为何需要Docker-compose2.Docker-compose 的特征3.Docker-compose 的优势4.Docker-compose 的劣势5.Docker-compose 的生产环境 二、Docker Compose 环境安装三、YAML 文件格式及编写注意事项四、Docker Compose配置…