typescript - 使用 Typescript 的 Redux 工具包 createAsyncThunk

Question

环境

1. Redux 工具包
2. react
3. typescript
4. Grpahql

背景

我正在使用 redux 和 redux-toolkit 进行本地状态管理。我阅读了 redux-toolkit 文档。我发现我们可以使用 redux-toolkit 中的 createAsyncThunk() 函数分派(dispatch) thunk Action 。此函数自动调度 pending、fulfilled、rejected 操作。

当我的异步工作失败时，thunk dispatch rejected action with 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 的类型是未知。

如何把它改成string？

Answer 1

两件事:此时，您仍然无法知道此拒绝是由未知的“抛出”还是 return rejectWithValue 引起的，因此即使您正确输入了 asyncThunk，action.payload 最终会变成 string | undefined 并且在继续之前，您需要检查 payload 是否为 undefined。

除此之外，您需要在此处提供通用 as described here in the docs :

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!!");
  }
});