读redux有感： redux原来是这样操做的。

2017.9.10日 教师节 ： ~当一个事物你没有接触，可是生活中 经常用到他，你就不得不去了解他了。

1. redux的基本原理

redux就是对一个仓库（store）的操做，咱们能够布置好多仓位（state）（如： 水果、零食、糕点）等，他们每个仓位（state）存储着不一样的物品，每个仓位都有一个操做系统（reducer）， 这个操做系统能够进行入库物品（ADD）、统计件数（COUNT）、筛选好（FILTER_GOOD）/坏（FILTER_BAD）等操做，这些操做都用一个统一的标签（type）来表示。好了比喻就到这里。

redux规定：

1. 用户每一次操做store都要触发一个action，这个action仅仅是告诉redux：1. 我要操做的类型type，2. 我提供的数据。触发条件dispatch({type: ... , data: ...});

function addTodo(content) {
  return {
    type: ADD_TODO,
    content: content
  }
}

dispatch(addTodo('你好啊'))

如上代码，咱们触发了一个行为ADD_TODO

2. 触发一个行为后，真正的state操做在reducer里完成，reducer里要作的事： 1. 任何状况都要返回一个state，2. 根据不一样的type作不一样的操做

function todoApp(state=[], action) {
  switch(action.type) {
    case ADD_TODO:
    return [
      ...state,
      {
        content: action.content,
        completed: false
      }
    ],
    case REMOVE_TODO:
    return [
        ...state.filter(item => item.id != action.id)
    ]
    default: 
    return state
  }
}    

差很少就像上面这样，定义了一个reducer函数，这个函数为两个行为作state处理，ADD_TODO、REMOVE_TODO。 该reducer函数接收两个参数，一个state是当前reducer对应的state，action是dispatch传递过来的行为对象。这个函数必定会返回一个新的state。差很少这个意思，不知道代码写错了没。

2. redux源码解析（看着源码看本节）

两个核心方法： combineReducers、createStore

4.1 Reducers 合并函数 combineReducers

用途： 将多个reducer合并成一个。

源码： 

1. 该函数接收一个参数reducers，reducers表明着要合并的全部reducer的键值对。

2. redux获取reducers全部键并遍历，过滤出键对应的值是function的项目，生成了最终的reducers对象finalReducers，以防非法reducer值入侵。

3. redux遍历finalReducers对象并检查，是否每个函数每一次执行总会返回一个state，并作标记shapeAssertionError。

4. 检查完毕后，回一个闭包函数。该闭包函数就是总的reducer函数combination。

在将来的某个时间，这个combination函数会被执行：

1. 若是shapeAssertionError是真，意味着有错误，不执行逻辑。

2. 遍历finalReducers，拿到每一个key值和reducers函数， 根据key值从state中拿到当前reducer下的当前状态previousStateForKey， 执行reducer函数并把previousStateForKey和action传入， 执行结果一定返回一个nextStateForKey，记住这个state。

 

3. 通过一次遍历后，每个reducer函数都执行并返回了新的state。若是新的state和原来的state一致，返回原来的state，若是不一致，返回新的state。

4.2Store 建立函数createStore

用途： 建立store和工具方法

1. 该函数接收三个参数（只说前两个）： reducer（总的reducer函数，combineReducers函数生成的combination函数）, preloadedState（自定义的初始化state）

2. 将reducer函数保存在currentReducer变量，初始化一个currentState为preloadedState或者undefined，后续redux会根据currentState值用reducer函数来初始化state。

3.初始化currentListeners、nextListeners为空数组，这两个数组为观察者模式服务，存储监听函数。

4.定义一个subscribe函数用来订阅一个监听函数，同时返回一个闭包函数unsubscribe，当执行这个unsubscribe函数时，当前监听函数移除监听队列。

5.定义dispatch函数，最核心的函数，其工做很是简单，执行当前的reducer函数currentReducer，并把当前currentState和action传递过去。经过currentReducer函数咱们能够获取到用户须要下一步获得的state，存储在currentState中为视图层所用。若是有监听函数，就遍历并执行他们。

6.getState函数返回当前state状态树。

3. 注意事项

1. 每一次dispatch都会遍历全部的reducer， 每个reducer能够对同一行为作不一样处理。dispatch要作什么事，只看type值！

2.每个reducer函数必须有对state为undefined时的处理，由于redux建立store时会初始化一次store，此时store中尚未任何值。

3. reducer函数是个纯函数，只作数据的改变，不作请求、定时器之类的逻辑。

4. 一个store就是一个state的树状结构，你只能经过reducer来改变他的数据。

4. 总结

还有一些小函数没用过也没看，，，毕竟博主也是个懒熊，，，以上是看源码获得的结果。原理很简单，看一遍源码就知道了，不看的话还真一脸懵逼。。有些地方可能没理解透，有老司机能够指导一二，若有错误请指正。