如何使用redux thunk和redux工具包提出发布请求

Question

我一直使用redux-toolkit比react-redux更多。我遇到了必须进行get请求的情况，因此我最近开始使用redux-thunk（在此之前，我使用useffect当我使用redux时，这不是一种标准方法处理 。

这是我的thunk函数的代码 nad extrareducer

export const fetchData = createAsyncThunk("type/getData", async () => {
    try {
        const response = await axios({url});
        return response.data;
    } catch (error) {
        console.log(error.response);
    }
});

export const extraReducers = {
    [fetchData.pending]: (state) => {
        state.loading = true;
    },
    [fetchData.fulfilled]: (state, action) => {
        state.loading = false;
        state.products = action.payload;
    },
    [fetchData.rejected]: (state) => {
        state.loading = false;
        state.error = true;
    },
};

在get> get replect> fetchdata 中处理 > response.data 在extrareducers中使用有效载荷，因此我可以轻松设置状态。但是，现在的情况是我已经提出了发布请求，我不知道如何将数据发送到我的thunk函数。

Answer 1

首先，您创建发布数据的动作，然后发送数据：

export const postData = createAsyncThunk(
  "type/postData",
  async (data) => {
    try {
      const response = await axios.post("https://reqres.in/api/users", data);
      // If you want to get something back
      return response.data;
    } catch (err) {
      console.error(err)
    }
  }
);

然后在要发送数据的地方，只需使用data参数，发送：

const handlePost = () => {
  // whatever you want to send
  const data = .........
  
  dispatch(postData(data));
}

如果您愿意，也可以为此操作修改extrareducer。