React学习计划-React16--React基础（八）react-redux使用与优化，纯函数介绍

笔记gitee地址

1. react-redux工作流程

2. 案例

1. 求和案例react_redux基本使用

1. 明确两个概念：

   1. UI组件：不能使用任何redux的api,只负责页面的呈现、交互等。
   2. 容器组件：负责和redux通信，将结果交给UI组件

2. 如何创建一个容器组件------靠react-redux的connect函数

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

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

4. 备注2：mapDispatchToProps也可以是一个对象
   示例

   1. 目录
      
   2. containers/Count.jsx容器组件内
      
   3. App.js
      
   4. components/Count.jsx为UI组件
      

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. 重点：Person的reducer和Count的Reducer要使用combineReducers进行合并
4. 交给store的是总的reducer,最后注意在组件中取出状态的时候，记得"取到位"

纯函数：

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

示例

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