React学习计划-React16--React基础(八)react-redux使用与优化,纯函数介绍

笔记gitee地址

学习了 redux,为什么还要讲react-redux呢?
redux不是专门为react所创建的,只不过在某一刻,reactredux看对眼了,所以俩人走到了一起,所以为了更好的支持redux,react官方出了react-redux来更好的支持redux

1. react-redux工作流程

在这里插入图片描述

2. 案例

1. 求和案例react_redux基本使用

  1. 明确两个概念:
    1. UI组件:不能使用任何reduxapi,只负责页面的呈现、交互等。
    2. 容器组件:负责和redux通信,将结果交给UI组件
  2. 如何创建一个容器组件——靠react-reduxconnect函数
connect(mapStateToProps, mapDispatchToProps)(CountUI)mapStateToProps: 映射状态:返回值是一个对象mapDispatchToProps:映射操作状态的方法,返回值是一个对象
  1. 备注1:容器组件中的store是靠props靠进去的,而不是在容器组件中直接引入
  2. 备注2:mapDispatchToProps也可以是一个对象
    示例
    1. 目录
      在这里插入图片描述
    2. containers/Count.jsx容器组件内
      在这里插入图片描述
    3. App.js
      在这里插入图片描述
    4. components/Count.jsxUI组件
      在这里插入图片描述

2. 求和案例react_redux优化

  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: xxxAction} // 映射操作状态的方法
    )(UI组件)
    
    1. UI组件中通过this.props.xxx读取和操作状态
      示例
    2. index.js
      在这里插入图片描述
    3. containers/Count.jsx容器组件内
      在这里插入图片描述

3. 求和案例react_redux数据共享版

  1. 定义一个Person组件,和Count组件通过redux共享数据
  2. Person组件编写:reducer、action,配置constant常量
  3. 重点:PersonreducerCountReducer要使用combineReducers进行合并
  4. 交给store的是总的reducer,最后注意在组件中取出状态的时候,记得“取到位”

纯函数:

  1. 一类特别的函数:只要是同样的输入(实参),必定得到同样的输出(返回)
  2. 必须遵循以下一些约束:
    1. 不得改写参数数据
    2. 不会产生任何副作用,例如网络请求(X),输出和输入设备(X)
    3. 不能调用Date.now()或者Math.random()等不纯的方法
  3. reduxreducer函数必须是一个纯函数

示例
1. 目录
在这里插入图片描述
2. store.js
在这里插入图片描述
3. constant.js
在这里插入图片描述
4. actions/person.js
在这里插入图片描述
5. reducers/person.js
在这里插入图片描述
6. App.js
在这里插入图片描述
7. Person/index.jsx容器组件
在这里插入图片描述

4. 求和案例react_redux开发者工具的使用

谷歌插件安装地址

  1. 想要了解更过可以点击去查找搜藏猫,在里面搜索redux
  2. 也可以直接点击安装
  3. yarn add redux-devtools-extension
  4. store中进行配置
import {composeWithDevTools} from 'redux-devtools-extension'
const store = createStore(allReducer, composeWithDevTools(applyMiddleware(thunk)))

5. 求和案例react_redux最终版

  1. 所有的变量名字要规范,尽量触发对象的简写形式
  2. reducers文件夹中,编写index.js专门用于汇总并暴露所以的reducer
    示例
    1. reducers文件夹目录
      在这里插入图片描述
    2. index.js
      在这里插入图片描述
    3. store.js
      在这里插入图片描述

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

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

相关文章

Couchdb 垂直权限绕过漏洞(CVE-2017-12635)

一、漏洞描述 Apache CouchDB是一个开源数据库&#xff0c;专注于易用性和成为”完全拥抱web的数据库”。它是一个使用JSON作为存储格式&#xff0c;JavaScript作为查询语言&#xff0c;MapReduce和HTTP作为API的NoSQL数据库。应用广泛&#xff0c;如BBC用在其动态内容展示平台…

【Unity入门】UGUI之Slider(滑动条)

目录 一、什么是Slider&#xff1f;二、Slider属性与功能 一、什么是Slider&#xff1f; Slider控件允许用户可以通过鼠标来在预先确定的范围调节数值 我们可以在Hierarchy视图右键 -> UI ->Slider来创建滑动条 通过上图可以发现Unity内置的Slider主要有3部分&#x…

AUTOSAR从入门到精通- 虚拟功能总线(RTE)(二)

目录 前言 基于Vector的Autosar 1. Autosar简介 1.1 SWC软件单元 1.2 BSW分层 1.3 运行环境RTE

阿里云服务器2核2G3M配置性能如何?

阿里云服务器2核2G3M是什么意思&#xff1f;2核2G3M是指云服务器的CPU内存带宽配置&#xff0c;2核CPU、2G内存、3M公网带宽。目前阿里云2核2G3M服务器可以选择云服务器ECS经济型e实例和轻量应用服务器&#xff0c;活动 https://t.aliyun.com/U/bLynLC 轻量2核2G3M是61元一年&a…

JAVA:面向对象1

类和对象 public String sayHello(){ //修饰符/ /返回值类型/ /方法名/ /方法的参数/ return "hello,world!"; return 返回值&#xff1b; } /* void 可以不写返回值&#xff0c;return一个空就行 &#xff1a; return; return 结束方法&#xff…

一些想法:关于行人检测与重识别

本文主要是介绍我们录用于 ECCV18 的一个工作&#xff1a;Person Search via A Mask-guided Two-stream CNN Model. 这篇文章着眼于 Person Search 这个任务&#xff0c;即同时考虑行人检测&#xff08;Pedestrian Detection&#xff09;与行人重识别&#xff08;Person Re-ide…

数据库-期末考前复习-第4章-数据库安全性

1、掌握实现数据库安全性控制的常用方法和技术有。 序号常用方法和技术概括1访问控制通过授权和权限管理来限制用户对数据库的访问和操作。可以使用角色和用户管理来定义不同用户的权限级别&#xff0c;并使用访问控制列表&#xff08;ACL&#xff09;来控制用户对数据库对象的…

Vue:使用IDEA开发Vue的相关配置

一、IDEA无法识别.vue文件 1、IDEA 添加Vue插件 2、添加Vue配置 File | Settings | Editor | File Types 找到 HTML 文件 在下面点号 输入*.vue 二、IDEA无法创建.vue文件 1、问题 在开发过程中&#xff0c;发现创建文件的界面&#xff0c;没有vue模板 2、相关配置 Fi…

2024年01月IDE流行度最新排名

点击查看最新IDE流行度最新排名&#xff08;每月更新&#xff09; 2024年01月IDE流行度最新排名 顶级IDE排名是通过分析在谷歌上搜索IDE下载页面的频率而创建的 一个IDE被搜索的次数越多&#xff0c;这个IDE就被认为越受欢迎。原始数据来自谷歌Trends 如果您相信集体智慧&am…

Java将word转换为文本

在Java中&#xff0c;你可以使用Apache POI库来读取Word文档并提取文本内容。你可以在 Maven 项目中添加以下依赖&#xff1a; <!-- Apache POI for Word 2007 (.docx) --> <dependency><groupId>org.apache.poi</groupId><artifactId>poi</…

基于JAVA的学校热点新闻推送系统 开源项目

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 新闻类型模块2.2 新闻档案模块2.3 新闻留言模块2.4 新闻评论模块2.5 新闻收藏模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 新闻类型表3.2.2 新闻表3.2.3 新闻留言表3.2.4 新闻评论表3.2.5 新闻收藏表 四、系统展…

Mysql基础总结

一、MySql基础 MySQL常见面试题 一、索引相关 &#xff08;1&#xff09;什么是索引? 索引是一种数据结构&#xff0c;可以帮助我们快速的进行数据的查找。 &#xff08;2&#xff09;索引是个什么样的数据结构呢? 索引的数据结构和具体存储引擎的实现有关&#xff0c;…

Redis优异的性能是如何实现的?

Redis是一款开源的键值存储系统&#xff0c;它以其高性能而闻名。Redis能够提供极高的读写速度&#xff0c;主要得益于以下几个方面的设计和实现&#xff1a; 1. 全内存数据存储 Redis将所有数据存储在内存中&#xff0c;这意味着所有的读写操作都是直接对内存进行&#xff0…

vue中$nextTick作用和实例

为什么要使用nextTick&#xff1f; vue中DOM更新是异步执行&#xff0c;相当于我们在修改数据的时候&#xff0c;视图是不会立即更新的&#xff0c;会先把新的数据攒一赞&#xff0c;例如假如v-for更新这三个数据item1和item2和item3&#xff0c;按照vue的特性dom更新的特性会…

C++ 具名要求-基本概念-指定该类型对象可以从右值构造

指定该类型对象可以从右值构造 指定该类型的实例可以从一个右值实参构造。 要求 以下情况下&#xff0c;类型 T 满足可移动构造 (MoveConstructible) &#xff1a; 给定 T 类型的右值表达式 rv任意标识符 u 下列表达式必须合法且拥有其指定的效果 表达式后条件T u rv;u…

FPGA项目(13)——基于FPGA的电梯控制系统

1.摘要 随着科技的发展&#xff0c;电梯早在上个世纪就已进入人们的生活。对于电梯的控制&#xff0c;传统的方法是使用继电器——接触器控制系统进行控制。随着EDA技术的发展&#xff0c;FPGA已广泛应用于各项电子设计中&#xff0c;本设计即利用FPGA来实现对电梯控制系统的设…

助力打造智慧数字课堂,基于YOLOv7【tiny/l/x】开发构建教学课堂场景下学生课堂行为检测识别分析系统

近年来&#xff0c;随着行为检测技术的发展&#xff0c;分析学生在课堂视频中的行为&#xff0c;以获取他们的课堂状态和学习表现信息已经成为可能。这项技术对学校的教师、管理人员、学生和家长都非常重要。使用深度学习方法自动检测学生的课堂行为是分析学生课堂表现和提高教…

【数值分析】线性方程组的迭代方法,jacobi,高斯赛德尔GS,SOR

线性方程组的迭代解法 2024年1月1日 #analysis 文章目录 线性方程组的迭代解法基本迭代法Jacobi迭代高斯-赛德尔&#xff08;GS&#xff09;迭代SOR迭代 迭代的收敛性分析和误差估计下链 基本迭代法 Jacobi迭代 A D − L − U AD-L-U AD−L−U D x ( k 1 ) ( L U ) x ( …

【LMM 006】LLaVA-Plus:可以学习如何使用工具的多模态Agent

论文标题&#xff1a;LLaVA-Plus: Learning to Use Tools for Creating Multimodal Agents 论文作者&#xff1a;Shilong Liu, Hao Cheng, Haotian Liu, Hao Zhang, Feng Li, Tianhe Ren, Xueyan Zou, Jianwei Yang, Hang Su, Jun Zhu, Lei Zhang, Jianfeng Gao, Chunyuan Li 作…

【大数据面试知识点】Spark的DAGScheduler

Spark数据本地化是在哪个阶段计算首选位置的&#xff1f; 先看一下DAGScheduler的注释&#xff0c;可以看到DAGScheduler除了Stage和Task的划分外&#xff0c;还做了缓存的跟踪和首选运行位置的计算。 DAGScheduler注释&#xff1a; The high-level scheduling layer that i…