使用createAsyncThunk创建的thunk如何在调用接口前dispatch自定义action

实现方法 #

createAsyncThunk 传入的异步回调（payloadCreator）支持第二个参数，是包含dispatch、getState等工具的对象，直接解构拿到dispatch就可以在请求发起前触发你的自定义action。

修改后的代码如下：

import { actionLoading } from './yourActionPath'; // 替换成你实际的action引入路径

export const getProducts = createAsyncThunk("getProducts", async (_, { dispatch }) => {
  // 直接调用dispatch触发复用的loading action
  dispatch(actionLoading());
  const response = await axios.get("api");
  return response;
});

多thunk复用优化 #

如果有大量thunk都需要加这个逻辑，不用每个都写一遍dispatch，可以封装一个高阶函数统一处理：

// 封装通用的thunk创建逻辑
const createAsyncThunkWithLoading = (type, payloadCreator) => {
  return createAsyncThunk(type, async (args, thunkAPI) => {
    thunkAPI.dispatch(actionLoading());
    // 执行原来的payloadCreator逻辑
    return payloadCreator(args, thunkAPI);
  })
}

// 之后所有需要触发loading的thunk都用这个封装好的方法创建即可
export const getProducts = createAsyncThunkWithLoading("getProducts", async () => {
  const response = await axios.get("api");
  return response;
});

// 其他接口thunk也可以直接复用
export const getUserInfo = createAsyncThunkWithLoading("getUserInfo", async () => {
  const response = await axios.get("user/api");
  return response;
});

补充说明 #

如果需要在请求结束（成功/失败）后统一关闭loading，也可以在这个封装函数里加try/finally处理：

const createAsyncThunkWithLoading = (type, payloadCreator) => {
  return createAsyncThunk(type, async (args, thunkAPI) => {
    try {
      thunkAPI.dispatch(actionLoading(true));
      return await payloadCreator(args, thunkAPI);
    } finally {
      thunkAPI.dispatch(actionLoading(false));
    }
  })
}

内容的提问来源于stack exchange，提问作者queeng