Redux-thunk 基礎知識

Created: November-22, 2018

雖然 redux 本身是完全同步的，但你可以使用 redux-thunk 等中介軟體來處理非同步操作。

thunk 是回撥的另一個名稱。它是一個函式，通常作為引數傳遞，以便稍後呼叫。

要使用，請將中介軟體應用於 redux 商店：

import ReduxThunk from 'redux-thunk';

const store = createStore(
    reducer,
    applyMiddleware(ReduxThunk)
);

這允許你將 thunk 傳遞給 dispatch 而不是普通物件。中介軟體將識別 thunk 並呼叫它。thunk 將商店的 dispatch 方法作為引數：

// an asynchronous action - "thunk"
// This will wait 1 second, and then dispatch the 'INCREMENT' action
const delayedIncrement = dispatch => setTimeout(() => {
    dispatch({
        type: 'INCREMENT'
    });
}, 1000);

// dispatch the thunk. 
// note: no () as we're passing the function itself
store.dispatch(delayedIncrement);