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

2023-12-28 15:37:37

笔记gitee地址

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
      在这里插入图片描述

文章来源:https://blog.csdn.net/qq_35940731/article/details/135266313
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。