flux、redux、redux-saga、react-redux、dva

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-sagaredux-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

你可能感兴趣的:(flux、redux、redux-saga、react-redux、dva)