【问题标题】：Redux-Toolkit createAsyncThunk with TypescriptRedux-Toolkit createAsyncThunk with Typescript
【发布时间】：2021-08-23 00:27:17
【问题描述】：

环境

Redux 工具包
反应
打字稿
Grpahql

背景

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

当我的异步工作失败时，使用action.error 作为SerializedError 类型发送rejected 操作。我们可以使用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？

【问题讨论】：

标签： typescript redux redux-toolkit

【解决方案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!!");
  }
});

【讨论】：