Skip to main content

[Redux] Thunk

redux-thunk @ Github

Redux Thunk middleware 讓你可以撰寫一個回傳 function 而非 action 的 action creators,透過 thunk 可以讓你控制發送(dispatch)一個 action 的時間點,因此適合用來處理非同步取得的資料狀態,或者是在特定條件符合的情況下才發送。

使用#

使用 redux-thunk 時,action creators 會回傳的不是物件,而是一個帶有 dispatch, getState, extraArgument 參數的 async function,並在這個 async function 會再去執行 dispatch 方法,來通知到 reducer:

export const FETCH_USERS = 'fetch_users';
export const fetchUsers = () => async (dispatch, getState, axiosInstance) => {
const res = await axiosInstance.get('/users');
dispatch({
type: FETCH_USERS,
payload: res,
});
};

async function 執行後本身也是一個 Promise,可以透過 .then() 繼續串接。

Source Code#

function createThunkMiddleware(extraArgument) {
// 這是 middleware 基本的寫法
return ({ dispatch, getState }) => (next) => (action) => {
// action 就是透過 action creators 傳進來的東西,
// 在 redux-thunk 中會是 async function
if (typeof action === 'function') {
// 在這裡回傳「執行後的 async function」
return action(dispatch, getState, extraArgument);
}
// 如果傳進來的 action 不是 function,則當成一般的 action 處理
return next(action);
};
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;
Last updated on