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

笔记gitee地址

1. react-redux工作流程

2. 案例

1. 求和案例react_redux基本使用

  1. 明确两个概念:

    1. UI组件:不能使用任何reduxapi,只负责页面的呈现、交互等。
    2. 容器组件:负责和redux通信,将结果交给UI组件
  2. 如何创建一个容器组件------靠react-reduxconnect函数

    connect(mapStateToProps, mapDispatchToProps)(CountUI)
    mapStateToProps: 映射状态:返回值是一个对象
    mapDispatchToProps:映射操作状态的方法,返回值是一个对象

  3. 备注1:容器组件中的store是靠props靠进去的,而不是在容器组件中直接引入

  4. 备注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组件)

    3. UI组件中通过this.props.xxx读取和操作状态
      示例

    4. index.js

    5. 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
相关推荐
LIN-JUN-WEI8 分钟前
[ESP32]VSCODE+ESP-IDF环境搭建及blink例程尝试(win10 win11均配置成功)
c语言·开发语言·ide·vscode·单片机·学习·编辑器
转转技术团队9 分钟前
多代理混战?用 PAC(Proxy Auto-Config) 优雅切换代理场景
前端·后端·面试
南囝coding10 分钟前
这几个 Vibe Coding 经验,真的建议学!
前端·后端
gnip24 分钟前
SSE技术介绍
前端·javascript
yinke小琪39 分钟前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
枣把儿43 分钟前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
望获linux44 分钟前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
爱编程的喵1 小时前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
喜欢吃豆1 小时前
深入企业内部的MCP知识(三):FastMCP工具转换(Tool Transformation)全解析:从适配到增强的工具进化指南
java·前端·人工智能·大模型·github·mcp
豆苗学前端1 小时前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试