React学习计划-React16--React基础（七）redux使用与介绍

笔记gitee地址

一、redux是什么

1. redux是一个专门用于做状态管理的js库（不是react插件库）
2. 它可以用在react、angular、vue的项目中，但基本与react配合使用
3. 作用：集中式管理react应用中多个组件共享的状态

二、什么情况下需要使用redux

1. 某个组件的状态，需要让其他组件可以随时拿到（共享）
2. 一个组件需要改变另一个组件的状态（通信）
3. 总体原则：能不用就不用，如果不用比较吃力才考虑使用

三、redux 工作流程

四、redux的三个核心概念

1. action

   1. 动作对象
   2. 包含2个属性
      • type: 标识属性，值为字符串，唯一，必要属性
      • data: 数据属性，值类型任意，可选类型
   3. 例子：{ type: 'increment', data: 1}

2. reducer

   1. 用于初始化状态、加工状态
   2. 加工时，根据旧的state和action，产生新的state的纯函数

3. store

   1. 将state、action、reducer联系在一起的对象
   2. 如何得到此对象？
      1. import { createStore } from 'redux'
      2. import reducer from './reducer'
      3. const store = createStore(reducer)
   3. 此对象的功能？
      1. getState(): 得到state
      2. dispatch(action): 分发action,触发reducer调用，产生新的state
      3. subscript(listener): 注册监听，当产生了新的state时，自动调用

五、案例(先看一个求和案例纯react版，在根据Redux版去做对比)

0. 求和案例纯react版

1. 求和案例_redux精简版

1. 去除Count组件的自身状态
2. src下建立：

  -redux
    -store.js
    -count_reducer.js

3. store.js
   1. 引入redux中的createStore函数，创建一个store
   2. createStore调用时要传入一个为其服务的reducer
   3. 记得暴露store对象
4. count_reducer.js
   1. reducer的本质是一个函数，接收: preState,action，返回加工后的状态
   2. reducer有两个作用，初始化状态、加工状态
   3. reducer被第一次调用时，是store自动触发的，
      传递的preState是undefined,传递的action是{type:'@@redux/INITu ...'}
5. 在index.js中检测store中状态的改变，一旦发生改变重新渲染

备注：redux只负责管理状态，至于状态的改变驱动页面的展示，要靠我们自己写

示例
1. 目录

2. store.js文件:该文件专门用于暴露一个store对象，整个应用只有一个store对象

3. count_reducer.js文件

1. 该文件用于创建一个为Count组件服务的reducer,reducer的本质就是一个函数
2. reducer函数会接收两个参数，分别为：之前的状态（preState）,动作对象（action）

4. Count.jsx组件

2. 求和案例_redux完整版

新增文件：

1. count_action.js 专门用于创建action对象
2. constant.js 放置容易写错的type值，方便管理
   示例
   1. 目录
      
   2. constant.js: 该模块是用于定义action对象中type类型的常量值
      
   3. count_action.js:该文件专门为count组件生成action对象,目的只有一个：便于管理的同时防止程序员单词写错
      
   4. count_reducer.js引用常量
      
   5. Count.jsx组件：

   监测redux中状态的变化，只要变化，就调用render

   
   6. index.js中
   

3. 求和案例_redux异步action版本

1. 明确：延迟的动作不想交给组件自身，想交给action
2. 何时需要异步action：想要对状态进行操作，但是具体的数据靠异步任务返回
3. 具体编码：
   1. yarn add redux-thunk, 并配置在store中
   2. 创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务
   3. 异步任务有结果后，分发一个同步action去真正操作数据
4. 备注： 异步action不是必须要写的，完全可以自己等待异步任务的结果然后再去分发同步action
   示例

   1. count_action.js:
      

   2. store.js引入三方库，用于支持异步操作
      

   3. Count.jsx

      // 延时加
       incrementAsync = ()=>{
         const { value } = this.selectNumber
         // 不在组件内部做异步处理
         // setTimeout(()=>{
         //   store.dispatch(createIncrementAction(value * 1))
         // }, 500)
         // 直接调取redux的异步操作
         store.dispatch(createIncrementAsyncAction(value * 1, 500))
       }