Redux-Toolkit createAsyncThunk 与 Typescript

Question

环境

1. Redux 工具包
2. 反应
3. 打字稿
4. 格帕赫勒

背景

我正在使用redux和redux-toolkit进行本地状态管理。我阅读了redux-toolkit文档。我发现我们可以createAsyncThunk()使用redux-toolkit. 该函数自动调度pending、fulfilled、rejected动作。

当我的异步工作失败时，将调度rejected操作action.error作为一种SerializedError类型。我们可以用函数自定义错误的结果rejectWithValue()。像这样。

const fetchAdminPassword = createAsyncThunk('adminPassword/fetch', async (_, { rejectWithValue }) => {
  try {
    const result = await client.query<{adminPassword: string}>({ query: FETCH_ADMIN_PASSWORD });
    const { data: { adminPassword } } = result;
    return adminPassword;
  } catch (err) {
    rejectWithValue("Error!!");
  }
});



builder.addCase(fetchAdminPassword.rejected, (state, action) => {
  state.fetchError = action.payload;
  state.fetchPending = false;
})

问题

action.payload 的类型是unknown。

如何将其更改为string？

Answer 1

有两件事：此时，您仍然无法知道此拒绝是否是由未知的“抛出”或 a 引起的return rejectWithValue，因此即使您正确输入 asyncThunk，action.payload最终也会出现这样的情况string | undefined，并且您需要使用 check forpayload来避免在undefined继续之前。

除此之外，您需要在此处提供通用信息，如文档中所述：

const fetchAdminPassword = createAsyncThunk<
  {adminPassword: string},
  void,
  {
    rejectValue: string
  }
>('adminPassword/fetch', async (_, { rejectWithValue }) => {
  try {
    const result = await client.query<{adminPassword: string}>({ query: FETCH_ADMIN_PASSWORD });
    const { data: { adminPassword } } = result;
    return adminPassword;
  } catch (err) {
    rejectWithValue("Error!!");
  }
});