Redux知识点

Redux中文文档：https://www.redux.org.cn/
Redux 是 JavaScript 状态容器，提供可预测化的状态管理。 可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。不仅于此，它还提供 超爽的开发体验，比如有一个时间旅行调试器可以编辑后实时预览。Redux 除了和 React 一起用外，还支持其它界面库。 它体小精悍（只有2kB，包括依赖）。

作用: 集中式管理react应用中多个组件共享的状态。

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

redux工作流程图

redux的三个核心概念

1. action
   1.动作的对象
   2.包含2个属性
   type：标识属性, 值为字符串, 唯一, 必要属性
   data：数据属性, 值类型任意, 可选属性
   3.例子：{ type: ‘ADD_STUDENT’,data:{name: ‘tom’,age:18} }
2. reducer
   1.用于初始化状态、加工状态。
   2.加工时，根据旧的state和action， 产生新的state的纯函数。
3. store
   1.将state、action、reducer联系在一起的对象
   1)getState(): 得到state
   2)dispatch(action): 分发action, 触发reducer调用, 产生新的state
   3)subscribe(listener): 注册监听, 当产生了新的state时, 自动调用

redux的核心API

1. createstore() 作用：创建包含指定reducer的store对象
2. store对象 作用: redux库最核心的管理对象
   它内部维护着:
   1)state
   2)reducer
   3.核心方法:
   1)getState()
   2)dispatch(action)
   3)subscribe(listener)
   4.具体编码:
   1)store.getState()
   2)store.dispatch({type:‘INCREMENT’, number})
   3)store.subscribe(render)
   5.applyMiddleware()
   作用：应用上基于redux的中间件(插件库)
   6.combineReducers()
   作用：合并多个reducer函数

redux异步编程
1.redux默认是不能进行异步处理的,
2.某些时候应用中需要在redux中执行异步任务(ajax, 定时器)
使用异步中间件 npm install --save redux-thunk

react-Redux将所有组件分成两大类
1.UI组件
1)只负责 UI 的呈现，不带有任何业务逻辑
2)通过props接收数据(一般数据和函数)
3)不使用任何 Redux 的 API
4)一般保存在components文件夹下
2.容器组件
1)负责管理数据和业务逻辑，不负责UI的呈现
2)使用 Redux 的 API
3)一般保存在containers文件夹下
3. 相关API
1)Provider：让所有组件都可以得到state数据

<Provider store={store}>
  <App />
</Provider>

2)connect：用于包装 UI 组件生成容器组件

import { connect } from 'react-redux'
  connect(
    mapStateToprops,
    mapDispatchToProps
  )(Counter)

3)mapStateToprops：将外部的数据（即state对象）转换为UI组件的标签属性

const mapStateToprops = function (state) {
  return {
    value: state
  }
}

4)mapDispatchToProps：将分发action的函数转换为UI组件的标签属性