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，这样您就可以实际获得error接口的类型。这里有几个使用TypeScript文档的例子：https://redux-toolkit.js.org/usage/usage-with-typescript#createasyncthunk。如果您有多种已知的错误响应格式，我建议您为这些格式添加类型保护，并为您的缩减程序引入一个实用程序帮助器，因为在使用createAsyncThunk时，您将始终在拒绝的情况下检查这些格式(在本例中为registerRequest.rejected)。