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
相关推荐
RadiumAg35 分钟前
记一道有趣的面试题
前端·javascript
yangzhi_emo39 分钟前
ES6笔记2
开发语言·前端·javascript
yanlele1 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
九年义务漏网鲨鱼1 小时前
【大模型学习 | MINIGPT-4原理】
人工智能·深度学习·学习·语言模型·多模态
jz_ddk2 小时前
[学习] C语言数学库函数背后的故事:`double erf(double x)`
c语言·开发语言·学习
中微子2 小时前
React状态管理最佳实践
前端
烛阴2 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子2 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...3 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情3 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图