Redux-Toolkit 中基于响应状态码的不同动作

Question

我正在试用 Redux-Toolkit，我真的很喜欢它的简洁性，但我不知道我应该如何读取服务器响应状态代码并根据它发送不同的操作。例如，我正在向 API

发送注册请求

export const registerRequest = createAsyncThunk(
  'register/registerRequest',
  async (userInfo: RegisterInfo) => {
    const { firstname, lastname, email, password } = userInfo

    const { data } = await axios.post('url/users/create', {
      firstname,
      lastname,
      email,
      password,
    })
    return data
  }
)

我可能会收到不同类型的错误，但所有错误都由我的切片中的一个案例处理

builder.addCase(registerRequest.rejected, (state, action) => {
      state.loading = false
      state.error = action.error
    })

使用 Redux-Toolkit 检查状态代码并派发相应操作的正确方法是什么？

Answer 1

在这种情况下，您需要处理 createAsyncThunk 的 actionCreator 中的错误。由于您正在使用 TS，因此您需要使用 rejectWithValue 以便您可以实际获取错误接口的类型。此处的 TypeScript 用法文档中有一些示例：https://redux-toolkit.js.org/usage/usage-with-typescript#createasyncthunk。如果你有多种已知的错误响应格式，我建议为它们添加类型保护并为你的 reducer 引入一个实用程序助手，因为你将始终检查那些被拒绝的情况（本例中为 registerRequest.rejected）使用 createAsyncThunk.

时

Redux-Toolkit 中基于响应状态码的不同动作

Different actions based on response status code in Redux-Toolkit

reactjs

redux

redux-toolkit