Redux-Toolkit createAsyncThunk with Typescript

Posted 2023-03-15

【中文标题】Redux-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？

【参考方案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!!");
  
);