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))