flux、redux、redux-saga、react-redu

https://zhuanlan.zhihu.com/p/53599723

1、flux（单向数据流）同步数据处理

image.png

• View：视图层；监听Store变化，做出相应更改
• Action：动作；即数据改变的消息对象，包含 type （类型）与 payload （传递参数）。
• Dispatcher：分发器；接收【所有的Action】分发给【所有 的Store】
• Store：数据存储；只通过Action改变（Action处理逻辑在这里面），不能直接修改state（【原state，非新建】），(state, action) => state，更改后发布更改信息。存在多个Store！！多个store间可能存在依赖关系

2、redux（单向数据流）同步数据处理

image.png

• View：视图层；监听Store变化，做出相应更改
• Action：动作；即数据改变的消息对象，包含 type （类型）与 payload （传递参数）。
• Store：数据存储；只有一个store，由createStroe生成，内部使用store.subscribe设置监听函数，将View的更新函数subscribe一下，即可跟据state变化，更新数据，内部集成了dispatch 方法，每次更新，不在原来的上面修改（【state都是新创建的】）

import { createStore } from 'redux';
const store = createStore(
  reducer，
  applyMiddleware(thunk, promise, logger) // 处理中间件，所有的中间件组成一个数组，依次执行
);
store.dispatch({
  type: 'ADD_TODO',
  payload: 'Learn Redux'
});

• Reducer：他是一个纯函数（相同的输入，永远都会有相同的输出），用来处理事件，每次返回一个新的state，(previousState, action) => newState，Reducer有多个，通过根Reducer统一管理

3、Middleware中间件

Redux中应用于异步数据流，主要有以下几种形式

• redux-thunk、redux-promise
  一般只能在 View 发送 Action 的时候，加上一些异步操作。即异步请求放在了action creator 中
• redux-saga
  1、把所有的异步操作看成是线程，使用普通的action触发，完成时也触发action作为输出
  2、异步获取数据的操作叫作副作用（Side Effect）
  3、基于ES6的Generator去实现的，通过不断调用next方法，去获取yield表达式的线程
• redux-saga 与 redux-thunk、redux-promise 对比
  1、redux-saga：异步获取的逻辑都处理在saga.js中，不掺杂在action.js或component.js中；redux-thunk、redux-promise： 掺杂在action.js或component.js中
  2、redux-saga：参数为标准的action；redux-promise掺杂异步借口请求处理
  3、redux-saga：采用类似于同步的数据处理，更易读；redux-thunk、redux-promise： 不易读
  4、redux-saga：可以使用try catch捕获错误，方便测试

4、react-redux

这个是react官方出的，是 redux 和 react 结合的一种实现。简单来说，react-redux就是用多个connect方法，连接容器组件（数据存储store）和ui组件（view显示），将容器组件的state映射到ui组建的props，将ui的事件映射到dispatch方法里

5、dva

基于redux和redux-saga的一套数据流方案，内部还额外内置了，react-router和fetch