深入學習和理解 Redux

{ type: 'LIKE_ARTICLE', articleId: 42 }
{ type: 'FETCH_USER_SUCCESS', response: { id: 3, name: 'Mary' } }
{ type: 'ADD_TODO', text: '金融前端.' }

/**
 * Turns an object whose values are different reducer functions, into a single
 * reducer function. It will call every child reducer, and gather their results
 * into a single state object, whose keys correspond to the keys of the passed
 * reducer functions.
 */export default function combineReducers(reducers) {
  const reducerKeys = Object.keys(reducers)
     ...  return function combination(state = {}, action) {
     ...    let hasChanged = false
    const nextState = {}    for (let i = 0; i < finalReducerKeys.length; i++) {      const key = finalReducerKeys[i]      const reducer = finalReducers[key]      const previousStateForKey = state[key]      const nextStateForKey = reducer(previousStateForKey, action)      if (typeof nextStateForKey === 'undefined') {        const errorMessage = getUndefinedStateErrorMessage(key, action)        throw new Error(errorMessage)
      }
      nextState[key] = nextStateForKey      //判斷state是否發生改變
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey
    }    //根據是否發生改變，來決定返回新的state還是老的state
    return hasChanged ? nextState : state
  }
}

從原始碼可以知道，入參是 Reducers，返回一個function。combineReducers就是將所有的 Reducer合併成一個大的 Reducer 函式。核心關鍵的地方就是每次 Reducer 返回新的state的時候會和老的state進行對比，如果發生改變，則hasChanged為true，觸發頁面更新。反之，則不做處理。

/**
 * Turns an object whose values are action creators, into an object with the
 * same keys, but with every function wrapped into a `dispatch` call so they
 * may be invoked directly. This is just a convenience method, as you can call
 * `store.dispatch(MyActionCreators.doSomething())` yourself just fine.
 */function bindActionCreator(actionCreator, dispatch) {
  return function() {
    return dispatch(actionCreator.apply(this, arguments))
  }
}
 
export default function bindActionCreators(actionCreators, dispatch) {
  if (typeof actionCreators === 'function') {    return bindActionCreator(actionCreators, dispatch)
  }
    ...
    ...  const keys = Object.keys(actionCreators)  const boundActionCreators = {}  for (let i = 0; i < keys.length; i++) {    const key = keys[i]    const actionCreator = actionCreators[key]    if (typeof actionCreator === 'function') {
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
  }  return boundActionCreators
}

bindActionCreator是將單個actionCreator繫結到dispatch上，bindActionCreators就是將多個actionCreators繫結到dispatch上。

/**
 * Composes single-argument functions from right to left. The rightmost
 * function can take multiple arguments as it provides the signature for
 * the resulting composite function.
 *
 * @param {...Function} funcs The functions to compose.
 * @returns {Function} A function obtained by composing the argument functions
 * from right to left. For example, compose(f, g, h) is identical to doing
 * (...args) => f(g(h(...args))).
 */
 export default function compose(...funcs) {
  if (funcs.length === 0) {    return arg => arg
  } 
  if (funcs.length === 1) {    return funcs[0]
  } 
  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

/**
 * Creates a store enhancer that applies middleware to the dispatch method
 * of the Redux store. This is handy for a variety of tasks, such as expressing
 * asynchronous actions in a concise manner, or logging every action payload.
 */export default function applyMiddleware(...middlewares) {
  return createStore => (...args) => {    const store = createStore(...args)
    ...
    ...    return {
      ...store,
      dispatch
    }
  }
}

const store = createStore(reducer);const next = store.dispatch; 
// 重寫store.dispatchstore.dispatch = (action) => {    try {
        console.log('action:', action);
        console.log('current state:', store.getState());
        next(action);
        console.log('next state', store.getState());
    } catch (error){
        console.error('msg:', error);
    }
}

let state = {
    count : 1}//修改之前console.log (state.count);//修改count的值為2state.count = 2；//修改之後console.log (state.count);

我們定義了一個有count欄位的state物件，同時能輸出修改之前和修改之後的count值。但此時我們會發現一個問題？就是其它如果引用了count的地方是不知道count已經發生修改的，因此我們需要透過訂閱-釋出模式來監聽，並通知到其它引用到count的地方。因此我們進一步最佳化程式碼如下：

let state = {
    count: 1};//訂閱function subscribe (listener) {
    listeners.push(listener);
}function changeState(count) {
    state.count = count;    for (let i = 0; i < listeners.length; i++) {        const listener = listeners[i];
        listener();//監聽
    }
}

const createStore = function (initState) {
    let state = initState;    //訂閱
    function subscribe (listener) {
        listeners.push(listener);
    }    function changeState (count) {
        state.count = count;        for (let i = 0; i < listeners.length; i++) {            const listener = listeners[i];
            listener();//通知
        }
    }    function getState () {
        return state;
    }    return {
        subscribe,
        changeState,
        getState
    }
}

let initState = {
    counter: {
        count : 0
    },
    info: {
        name: '',
        description: ''
    }
}let store = createStore(initState);//輸出countstore.subscribe(()=>{    let state = store.getState();
    console.log(state.counter.count);
});//輸出infostore.subscribe(()=>{    let state = store.getState();
    console.log(`${state.info.name}:${state.info.description}`);
});