redux react-redux redux-saga redux-thunk dva

redux

为什么出现：React 有 props 和 state ，React 没有数据向上回溯的能力，唯一的方法是提升state到公用组件当中，子组件触发父组件的回调修改state。为了更好的管理state状态，引入了专业的React顶层state分发给所有React 应用

三大原则：

• 单一数据源： 整个应用的state存储在一棵 object tree 中，并且这个object tree 只存在于唯一一个store中
• state是只读的：唯一改变state的就是action，
• 使用纯函数来执行修改：为了描述action如何改变state tree，需要编写reducer，而reducer 要做的是就是根据state和action的值产生一个新的对象返回

function reducer (state,action)=>{
    const {counterCaption}=action
    switch(action.type){
        case ActionTypes.INCREMENT:
            return{...state,[counterCaption]:state[counterCaption]+1}
        case ActionTypes.DECREMENT:
            return{...state,[counterCaption]:state[counterCaption]-1}
        default:
        	return state
    }
}

react-redux

负责和Redux Store打交道的组件，处于外层，被称为容器组件（Container Component）
负责渲染界面的组件，处于内层，叫做展示组件（PresentationalComponent）

react-redux的两个最主要功能：

• Provider：提供包含store的context
• connect：连接容器组件和傻瓜组件；

redux-saga

是redux的一个中间件，解决异步问题
是一个用于管理应用程序 Side Effect 的库，它的目标是让副作用管理更容易，执行更高效。（异步获取数据，访问浏览器缓存等），将redux的同步转为异步，异步流程可控制

redux-thunk

thunk的缺点也是很明显的，thunk仅仅做了执行这个函数，并不在乎函数主体内是什么，也就是说thunk使得redux可以接受函数作为action，但是函数的内部可以多种多样。比如下面是一个获取商品列表的异步操作所对应的action

export default ()=>(dispatch)=>{
    fetch('/api/goodList',{ //fecth返回的是一个promise
      method: 'get',
      dataType: 'json',
    }).then(function(json){
      var json=JSON.parse(json);
      if(json.msg==200){
        dispatch({type:'init',data:json.data});
      }
    },function(error){
      console.log(error);
    });
};

从这个具有副作用的action中，我们可以看出，函数内部极为复杂。如果需要为每一个异步操作都如此定义一个action，显然action不易维护。

dva

dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。dva = React-Router + Redux + Redux-saga；