redux-thunk 源碼學習記錄

redux觸發store更新，使用的dispatch(action),在關於createStore的源碼解讀中能夠看到，store.dispatch限制了action必須是一個純對象。是爲了保持reducer的純淨性

只要傳入參數相同，返回計算獲得的下一個 state 就必定相同。沒有特殊狀況、沒有反作用，沒有 API 請求、沒有變量修改，單純執行計算。

redux-thunk是redux推薦的一個異步處理middleware，它能夠在觸發store.dispatch以前完成reducer中不能搞定的反作用，好比異步操做。

源碼實現

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    // 若是ation是函數，這調用這個函數，而且傳入dispatch和getState
    if (typeof action === 'function') {
      // 此處的dispatch是在applyMiddleware中改寫過的
      return action(dispatch, getState, extraArgument);
    }

    // 若是是對象，這調用下一個middleware
    return next(action);
  };
}

const thunk = createThunkMiddleware(); // 返回一個middleware
// 提供原函數，能夠傳遞額外的參數
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

redux-thunk這個middleware能夠接受函數類型的action，在action函數中進行各類自定義的操做（延時，接口請求等），而後再使用傳入的dispatch觸發實際的action動做（純對象）。這樣就不會影響reducer的純潔性。

實例

異步的action

export function logTime (time) {
    return {
        type: LOG_TIME,
        time
    }
}

export function delayLogTime () {
    let now = new Date().toString();
    return (dispatch) => { //可接受dispatch，getState
        // 進行反作用操做
        setTimeout( ()=> {
            // 實際觸發ation
            dispatch(logTime(`${now} --- ${new Date().toString()}`))
        },1000)
    }
}

使用redux-thunk

import thunk from 'redux-thunk'

let store = createStore(reducer,applyMiddleware(thunk))