在 createAsyncThunk 中使用辅助函数

时间:2021-07-12 20:35:59

标签: reactjs react-native react-redux

我正在使用 redux 工具包,它很棒。我想在 createAsyncThunk 中使用辅助函数,例如看下面的例子

// 首先创建thunk

const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (query, thunkAPI) => {
    const url="https://example.com";
    const response = await postRequest(url , query)
    return response.data
  }
)

现在我想创建名为 postRequest 的辅助函数,我在其中发送 url 和查询以获取响应。

export const postRequest = (url,query) => {
  axios
    .post(url, query)
    .then((response) => response.json())
    .then((responseData) => {
      return responseData;
    })
    .catch((error) => console.warn(error));
};





 extraReducers: (builder) => {
    builder.addCase(registerUser.pending, (state, action) => {
      console.log("pending");
    });
    builder.addCase(registerUser.fulfilled, (state, action) => {
      console.log("accepted");
    });

    builder.addCase(registerUser.rejected, (state, action) => {
      console.log("rejected");
    });
  },

现在当我像下面这样发送时

dispatch(fetchUserById({
    "name": "John",
    "token": "123"
}))

当我运行我的代码时,它不会等待 axios。 registerUser.fullfill 被立即调用,action.payload 为 undefined。

0 个答案:

没有答案