如何在 thunk-action 中传递静态类型的参数？答案

【问题标题】：How to pass statically typed argument in thunk-action?如何在 thunk-action 中传递静态类型的参数？
【发布时间】：2020-07-21 10:46:11
【问题描述】：

在我的 react 应用程序中，我在 Action Creator 的帮助下创建了一个 ThunkAction。它看起来像这样 -

export const oneMoreAsyncThunkAction: ActionCreator< ThunkAction<void, IChatState, {}, ToggleOnlineStateAction >> = (payload: boolean) => {
    return (dispatch: ThunkDispatch<IChatState, {}, ToggleOnlineStateAction >, getState, extraArguement): void => {
      try {        
          const promise = new Promise<ToggleOnlineStateAction>((resolve, reject) =>{
              setTimeout(() => {
                  resolve({
                    type: TOGGLE_ONLINE_STATE,
                    payload: payload
                });
              }, 1000);
          })
          promise.then(action => {
              dispatch(action)
          });
      } catch (e) {}
    };
  };

我期待在我的操作中使用布尔参数 (payload)。

在另一个文件中，我正在使用这样的操作 -

let action = ChatActions.oneMoreAsyncThinkAction(!props.isOnline);
dispatch(action);

我期待 VSCode 会建议我在操作中传递一个布尔值作为参数。但它表明...any[] 值可以在参数中传递。

我希望我的 Action 是静态类型的。如何修复我的代码，以便 VSCode 建议我在操作中传递布尔值。

【问题讨论】：

标签： reactjs redux react-redux redux-thunk

【解决方案1】：

这里最简单的答案是使用the createAsyncThunk API from our official Redux Toolkit package，它是用TS写的，强类型的：

const toggleOnline = createAsyncThunk(
  'chat/toggleOnline',
  async (online: boolean) => {
    await sleep(1000); // use a common util function here
    return online; // becomes the success action payload
  }
)

// later
dispatch(toggleOnline(!isOnline));

【讨论】：