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

笔记gitee地址

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

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,给包裹一个 即可。
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