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

Question

在我的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建议我在操作中传递布尔值。

Answer 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));