深刻浅出解读redux源码之createStore、combineReducers

在react中使用redux状态管理的一个完整的流程：

0.使用中间件建立仓库，而且经过react-redux中的Provider 传入仓库，以便子组件链接仓库，获取状态和派发动做。
1.先构建一个组件
2.实现页面的基本布局和css样式
3.根据后台文档写好调取api的方法，好比axios/fetch 以及使用resful风格
4.在action-types.js文件中定义新的动做类型 并导出
5.在action里添加新的方法，调取后台接口，获取后台数据，并经过payload传参。若是须要发给后台参数，经过getState结构出来，在调取接口的时候处理好并传给后台。
6.在本身的reducer中增长case以处理相应的动做类型
7.组件经过connect链接仓库，并在组件种调用action方法，获取数据处理逻辑
说明：1.派发动做会自动执行renducer，而后把action当作参数传进去，执行。

那么redux内部到底是如何建立仓库？如何进行状态管理呢？

建立仓库

首先，redux是一种设计模式，能够和jQuery/原生js/react一块儿使用。本文配合使用的是原生js。

//建立仓库
const createStore =(reducer)=>{
  let state;
  let listeners=[];
  let getState=()=>state;
//dispatch作了什么？
//1.每派发一个动做，就会执行reducer合并老状态，返回一个新状态
//2.让订阅的函数执行，若是订阅的是render函数就会从新渲染页面
  let dispatch=(action)=>{
    state=reducer(state,action);//当仓库中的state发声改变，会从新执行render,读取最新的状态树并更新视图
    listeners.forEach(l=>l());
  }
// 订阅函数
  let subscribe=(listener)=>{
    listeners.push(listener);
    return ()=>{//返回一个取消订阅的函数，这个函数手动执行了，才会取消订阅
      listeners.filter(l=>l!=listener);
    }
  }
  return {
    getState,//获取仓库状态
    subscribe,//订阅
    dispatch//派发动做，发布订阅的事情
  }
}
export {createStore}

如何取消订阅?

let unsubscribe=store.subscribe(render);//假设订阅的是render函数

setTimeout(()=>{
  unsubscribe();
},5000)
  //取消订阅以后 也就是5s以后派发动做页面不会从新渲染


----------

`通常在react的生命周期的组件将要挂载和组件将要卸载两个阶段进行订阅和取消订阅。`

componentWillMount(){
  this.unsubscribe=store.subscribe(()=>{
   //订阅的函数能够是render
  })
}

componentWillUnMount(){
  this.unsubscribe();
}

combineReducers: 让每一个小管理员执行，更新每个小的状态树

let combineReducers = (reducers)=>{
    return function (state = {}, action) {
        return Object.keys(reducers).reduce((newState, key) => {
            newState[key] = reducers[key](state[key], action);
            return newState;//返回更新后的state
        }, {});
    }
}
------解读这段代码以下：----
// 假设大的管理reducers是这样的：
let reducers={home:小管理员fn1,list:小管理员fn2,detail:小管理员fn3};

Object.keys(reducers) -> [home,list,detail] //把属性名取出来做为一个数组

[home,list,detail].reduce((newState,key)=>{

      解读此行代码 newState[key] = reducers[key](state[key], action);
      
      newState = { home/list/detail: 新的state }   
      新的state= 小管理员reducer分别执行
                fn1/fn2/fn3(state.home/list/detail,action)执行，
                执行的参数是总是state和派发的动做，更新每一个小的状态树
                
  return newState ;//返回更新后的状态树
 },{})//第一个参数是空对象做为newState的值

本文将会深刻分析redux源码的实现，未完待续，敬请关注。。。