Redux

action

action是一个对象，其中type属性是必须的，同时可以传入一些属性的数据。
action可以用actionCreactor进行创造,actionCreactor是一个函数,例如:
function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

dispatch就是把action对象发送出去, 结合Action Creator发送动作的代码可以这样写
store.dispatch(addTodo('Learn Redux'));


如果一个Action Creator（动作生成器），返回一个函数,那么需要redux-thunk中间件进行
处理;如果一个Action Creator返回一个 Promise 对象, 那么就需要redux-promise中间件.

applyMiddleware

export default function applyMiddleware(...middlewares) {
  return createStore => (reducer, initialState) => {
    var store = createStore(reducer, initialState);
    var dispatch = store.dispatch; //拿到真正的 dispatch
    
    // 将最重要的两个方法 getState/dispatch 整合出来
    var middlewareAPI = {
      getState: store.getState,
      dispatch: action => dispatch(action)
    };
    
    // 再组合出新的 dispatch, 一个store只有一个dispatch方法
    var chain = middlewares.map(middleware => middleware(middlewareAPI));
    dispatch = compose(...chain)(store.dispatch)

    // 返回新的store实例， 该实例具有新的dispatch方法
    return {
      ...store,
      dispatch
    };
  };
}

createStore(reducer, initialState, enhancer) //enhancer即applyMiddleware（...）
在createStore中会判断applyMiddleware(...) enhancer 是否存在并且是合法的函数：enhancer(createStore)(reducer, preloadedState)

combineReducers

总之，combineReducers()做的就是产生一个整体的 Reducer 函数。
该函数根据State的key去执行相应的子 Reducer，并将返回结果合并成一个大的 State 对象

# 每个子reducer的state是不一样的,但是action是一样的

// combineReducers的结果是一个大reducer, 该函数返回的state
// 的属性根据不同的reducer(作为key)进行划分
const combineReducers = reducers => {
  return (state = {}, action) => {
    return Object.keys(reducers).reduce(
      // nextState是累加器其初始值是{}
      (nextState, key) => {
        // 根据key值调用相应的reducer并传入相应的state
        nextState[key] = reducers[key](state[key], action);
        return nextState;
      },
      //累加器初始值
      {} 
    );
  };
};

上面最主要的代码是nextState[key] = reducers[key](state[key], action);   
(nextState[key]  reducers[key]   state[key])
每个子reducer传入的是子state对象, 子reducer返回的state又作为新的state的一部分

(
ps: Reducer是一个函数，它接受Action和当前State作为参数，返回一个新的State; 因为Reduce总要返回一个
新的State, 所以一般使用对象扩展符创建新的对象,例如: "return {...state, ...{imgpath: action.path}};"
)

connect

React-Redux 提供connect方法，用于从 UI 组件生成容器组件。connect的意思，就是将这两种组件连起来。

connect方法接受两个参数：
mapStateToProps     // Map Redux state to component props
mapDispatchToProps  // Map Redux actions to component props
也就是说UI组件可以通过props访问这两部分数据

作为函数，mapStateToProps和mapDispatchToProps执行后应该返回一个对象，里面的每一个键值对就是一个映射(map)
例如
// Map Redux state to component props 
function mapStateToProps(state) {                              map
  return {                                          Props <---------- State 
    value: state.count                              value是UI组件中的键, 其值是state.count
  }
}
          

design principle

1. Store就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个Store;
2. Store对象包含所有数据,如果想得到某个时点的数据，就要对Store生成快照;这种时点的数据集合，就叫做State
   当前时刻的State，可以通过store.getState()拿到;
3. Store.dispatch()是View发出Action的唯一方法;
4. Store收到Action以后，必须给出一个新的State，这样View才会发生变化, store.dispatch方法会触发Reducer的自动执行;
5. Store允许使用store.subscribe方法设置监听函数，一旦State发生变化，就自动执行这个函数;
   只要把View的更新函数（对于React项目，就是组件的render方法或setState方法）放入listen，就会实现View的自动渲染.
   

首先，用户发出Action;
然后，Store自动调用Reducer，并且传入两个参数：当前State和收到的Action,Reducer会返回新的State;
State一旦有变化，Store就会调用监听函数.