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

react react-redux学习记录

react react-redux学习记录

  • 1.原理
  • 2.怎么用呢
    • 2.1 容器组件
    • 2.2UI组件
    • 2.3 App.jsx
  • 3.简化
    • 3.1简写mapDispatch
    • 3.2 Provider组件的使用
    • 3.3整合UI组件和容器组件

1.原理

请添加图片描述

UI组件:不能使用任何redux的api,只负责页面的呈现、交互等。
容器组件:负责和redux通信,将结果交给UI组件。看得出来容器组件很重要的,它连接着ui组件和redux

2.怎么用呢

文件目录结构:
在这里插入图片描述

2.1 容器组件

import CountUI from '../../components/Count';//引入action
import {createIncrementAction,createSubtractionAction,createIncrementAsyncAction
} from '../../redux/count_action'//connect的第一个第一个参数主要可传两个参数,相当于将store中的状态和操作状态传递给UI组件
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(createSubtractionAction(number)),jiaAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time)),}
} //使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)

2.2UI组件

import React, { Component } from "react";
import store from "../../redux/store";export default class Count extends Component {state = { carName: "奔驰c63" };componentDidMount() {store.subscribe(() => {this.setState({});});}//加法increment = () => {const { value } = this.selectNumber;this.props.jia(value*1)};//减法decrement = () => {const { value } = this.selectNumber;this.props.jian(value*1,500)};//奇数再加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() {console.log('UI组件接收到的props是',this.props);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>&nbsp;</div>);}
}

2.3 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><Count  store={store}/></div>)}
}

3.简化

3.1简写mapDispatch

export default connect(mapStateToProps, {//和之前的箭头函数都是返回的一个action对象,react-redux优化了自动分发dispatchjia: createIncrementAction,jian: createSubtractionAction,jiaAsync: createIncrementAsyncAction,
})(CountUI);

3.2 Provider组件的使用

不使用react-redux的话,需要在在index.js写上对redux的监听

//这是react18.0之前的版本写法
store.subscrible(() =>{
ReactDOM.render(<App/>,document.getElementById("root"))
})

使用react-redux的话,不需要监听的了;而且在App.jsx中:
在这里插入图片描述
如果有很多的容器组件,那就需要写很多重复的store={store},优化是当前页面:
在这里插入图片描述
然后再index.js中使用Provider组件
在这里插入图片描述

3.3整合UI组件和容器组件

直接将UI组件和容器组件整合成一个

import React, { Component } from "react";//引入action
import {createIncrementAction,createSubtractionAction,createIncrementAsyncAction,
} from "../../redux/count_action";//connect的第一个第一个参数主要可传两个参数,相当于将store中的状态和操作状态传递给UI组件
import { connect } from "react-redux";export  class Count extends Component {state = { carName: "奔驰c63" };//加法increment = () => {const { value } = this.selectNumber;this.props.jia(value*1)};//减法decrement = () => {const { value } = this.selectNumber;this.props.jian(value*1,500)};//奇数再加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() {console.log('UI组件接收到的props是',this.props);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>&nbsp;</div>);}
}/* 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:createIncrementAction,
// 		jian:createSubtractionAction,
// 		jiaAsync:createIncrementAsyncAction,
// 	}
// }//使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateToProps, {//和之前的箭头函数都是返回的一个action对象,react-redux优化了自动分发dispatchjia: createIncrementAction,jian: createSubtractionAction,jiaAsync: createIncrementAsyncAction,
})(Count);

相关文章:

react react-redux学习记录

react react-redux学习记录1.原理2.怎么用呢2.1 容器组件2.2UI组件2.3 App.jsx3.简化3.1简写mapDispatch3.2 Provider组件的使用3.3整合UI组件和容器组件1.原理 UI组件:不能使用任何redux的api&#xff0c;只负责页面的呈现、交互等。 容器组件&#xff1a;负责和redux通信&…...

nodejs环境配置

啥是node.js 简单理解就是js运行环境 啥是npm 简单理解就是nodejs包管理工具&#xff0c;全称Node Package Manager 啥是cnpm npm的开源镜像&#xff0c;在国内使用cnpm替代npm可以起到加速的效果 https://npmmirror.com/ ①安装node.js https://nodejs.org/en/download/ 下载…...

数据治理之元数据管理Atlas

数据治理之元数据管理的利器——Atlas 一、数据治理与元数据管理 1.1 背景 为什么要做数据治理&#xff1f; 业务繁多&#xff0c;数据繁多&#xff0c;业务数据不断迭代。人员流动&#xff0c;文档不全&#xff0c;逻辑不清楚&#xff0c;对于数据很难直观理解&#xff0c;…...

15 Nacos客户端实例注册源码分析

Nacos客户端实例注册源码分析 实例客户端注册入口 流程图&#xff1a; 实际上我们在真实的生产环境中&#xff0c;我们要让某一个服务注册到Nacos中&#xff0c;我们首先要引入一个依赖&#xff1a; <dependency><groupId>com.alibaba.cloud</groupId>&l…...

C++将派生类赋值给基类(向上转型)

1.将派生类对象赋值给基类对象 #include <iostream> using namespace std;//基类 class A{ public:A(int a); public:void display(); public:int m_a; }; A::A(int a): m_a(a){ } void A::display(){cout<<"Class A: m_a"<<m_a<<endl; }//…...

使用Platform Designer创建Nios II 最小系统

Nios II简介 ​ Nios II 软核处理器十多年前就有了&#xff0c;它和xilinx的MicroBlaze类似&#xff0c;性能相比硬核处理器要差得多&#xff0c;工程应用也不是很多&#xff0c;那还有必须学习一下吗&#xff1f;我个人认为了解一下Nios II开发流程&#xff0c;对intel FPGA开…...

CD销售管理系统

技术&#xff1a;Java、JSP等摘要&#xff1a;二十一世纪是一个集数字化&#xff0c;网络化&#xff0c;信息化的&#xff0c;以网络为核心的社会。中国的网民充分领略到“畅游天地间&#xff0c;网络无极限” 所带来的畅快。随着Internet的飞速发展&#xff0c;使得网络的应用…...

华为OD机试模拟题 用 C++ 实现 - 玩牌高手(2023.Q1)

最近更新的博客 【华为OD机试模拟题】用 C++ 实现 - 最多获得的短信条数(2023.Q1)) 文章目录 最近更新的博客使用说明玩牌高手题目输入输出描述示例一输入输出说明Code使用说明 参加华为od机试,一定要注意不要完全背诵代码,需要理解之后模仿写出,通过率才会高。 华为…...

Hive 的Stage如何划分?

Hive 的Stage如何划分&#xff0c;也是Hive SQL需要优化的一个点&#xff0c;这个问题&#xff0c;我也是在实际的工作中遇到的。所以我查询了网络的解答并记录下来&#xff0c;以便日后复习。以下是主要内容&#xff0c;enjoy~~~ 一个 Hive 任务会包含一个或多个 stage&#…...

《嵌入式应用开发》实验一、开发环境搭建与布局(上)

1. 搭建开发环境 去官网&#xff08;https://developer.android.google.cn/studio&#xff09;下载 Android Studio。 安装SDK&#xff08;默认Android 7.0即可&#xff09; 全局 gradle 镜像配置 在用户主目录下的 .gradle 文件夹下面新建文件 init.gradle&#xff0c;内容为…...

电子科技大学软件工程期末复习笔记(五):生产率和工作度量

目录 前言 重点一览 软件产品度量 测量软件生产率的两种方法 基于LOC测量 例题&#xff1a; 优点 缺点 基于功能点测量 例题&#xff1a; 本章小结 前言 本复习笔记基于王玉林老师的课堂PPT与复习大纲&#xff0c;供自己期末复习与学弟学妹参考用。 重点一览 这一部分内…...

400G光模块知识大全

400G光模块是目前高速传输领域中的一种先进产品&#xff0c;被广泛应用于高性能数据中心、通信网络、大规模计算、云计算等领域。本文将从400G光模块的定义、技术、产品型号、应用场景以及未来发展方向进行详细介绍。一、什么是400G光模块&#xff1f;400G光模块是指传输速率达…...

【Linux】零成本在家搭建自己的私人服务器解决方案

我这个人自小时候以来就特喜欢永久且免费的东西&#xff0c;也因此被骗过&#xff08;花巨款买了永久超级会员最后就十几天&#xff09;。 长大后骨子里也是喜欢永久且免费的东西&#xff0c;所以我不买服务器&#xff0c;用GitHubPage或者GiteePage搭建自己的静态私人博客&…...

Python 多线程、多进程和协程

一、多线程 threading 模块 threading 模块对象 对象描述Thread表示一个执行线程的对象Lock锁原语对象&#xff08;与 thread 模块中的锁一样&#xff09;RLock可重入锁对象&#xff0c;使单一线程可以&#xff08;再次&#xff09;获得已持有的锁&#xff08;递归锁&#x…...

Xml 注解

文章目录XmlRootElement(name"MyRootElement")XmlAccessorType(XmlAccessType.FIELD)XmlElementXmlAttributeXmlValueXmlElementRefXmlRootElement(name“MyRootElement”) XmlRootElement(name"MyRootElement") public class AccessorType {public Strin…...

【CSS文字滚动】CSS实现文字横向循环无缝滚动,鼠标移入暂停移出继续(附实测源码)

CSS如何实现文字横向滚动滚动效果1、垃圾liMarquee&#xff08;最好别用&#xff09;2、css实现文字滚动&#xff0c;且鼠标移入移出暂停和继续HTML源码如下&#xff1a;CSS源码如下&#xff1a;JS源码如下&#xff1a;3、片尾彩蛋CSS实现文字横向循环无缝滚动&#xff0c;鼠标…...

不使用implements关键字实现实现类(类似于mapper)

首先&#xff0c;说明一下功能需求&#xff0c;平时定义一个接口&#xff0c;就要使用implements关键字来实现接口。那么&#xff0c;当不使用此关键字的时候&#xff0c;是否也能使相关接口也能够绑定实现类呢&#xff1f; 答案是肯定的。 此篇文章的主要功能有两个&#xf…...

antd4里table的滚动是如何实现的?

rc-table里Header、Footer、TableBody实现保持同频滚动的方法 场景&#xff1a;Header、Footer都有&#xff0c;Table设置了scrollX&#xff0c;才关注同频滚动 那么是如何实现的&#xff1f; 监听onScroll方法获取到滚动条向左的滚动的距离scrollLeft&#xff1b;同时给三个…...

抓取namenode 50070 jmx的指标信息

在生产实践过程中&#xff0c;需要把data退役之后需要停机下线&#xff0c;在下线之前需要确认机器是否已下线完成&#xff0c;要去namenode的50070界面上查看显然效率低&#xff0c;为了能够快速拿到节点信息&#xff0c;写了简单的脚本。jmx/50070还有很多信息可以获取&#…...

aspnetcore-browser-refresh.js和Visual Studio Browser Link

我在调试ASP.NET Core web应用时&#xff0c;发现请求的页面文档底部多了一部分文件&#xff0c;而在我的页面中却没有包含&#xff0c;故查询资料&#xff0c;在此记录&#xff1a; 图中&#xff0c;可以看到红框部分是多出来了2个脚本 1.aspnetcore-browser-refresh.js 这里…...

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

IP如何挑?2025年海外专线IP如何购买?

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...