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来改变他的数据。