redux 对createAsyncThunk?执行调度操作

ssgvzors  于 2023-03-12  发布在  其他
关注(0)|答案(3)|浏览(147)

我有一个thunk操作是由createAsyncThunk创建的。我想在调用API更新状态之前分派一个操作。
我不想使用action getProducts.pending,因为我想为其他thunk操作分派actionLoading()
我该怎么做呢?谢谢!

export const getProducts = createAsyncThunk("getProducts", async () => {

  // I want dispatch action actionCallAPIPending like that
  // dispatch(actionLoading());
  const response = await axios.get("api");
  return response;
});
qltillow

qltillow1#

您可以使用createAsyncThunk中回调函数的第二个参数执行此操作:

export const getProducts = createAsyncThunk("getProducts", async (_, thunkAPI) => {
  thunkAPI.dispatch(actionLoading());
  const response = await axios.get("api");
  return response;
});
hjzp0vay

hjzp0vay2#

随着createStore方法被弃用,我一直在寻找一个解决方案,以迁移现有的项目来使用@reduxjs/toolkit,同时建立一个新的项目。
我发现@越南的答案非常有用,虽然完整地说,我想提到另一种使用异步Thunks的方式,只是为了让它在同一个线程的人谁结束在这里,可能会发现它有用。
您仍然可以创建一个异步形实转换而不需要createAsyncThunk,但是这样您就不能依赖extraReducers了。

export const getProducts = (): AppThunk => async (dispatch) => {
  dispatch(actionLoading());

  try {
    const response = await axios.get("api");
    // return the response or store it
    return response;
  } catch (error) {
    // handle the error
    console.warn(error)
  }

  dispatch(actionLoading());
};
wribegjk

wribegjk3#

createAsyncThunk的回调中,您可以从第二个参数析构分派。

export const asyncthunk = createAsyncThunk(
      "ACTION",
      async (_,{dispatch) => {
        try {
          const { data } = await axios.get("api")
          dispatch(anotherAction())
          return data;
        } catch (error) {
          throw error;
        }
      }
    );

相关问题