打字稿使用 actionType 作為子組件中的屬性來響應 redux 和 redux-thunk

Question

我在父組件Tasks 中有兩個組件 Tasks 和 Task 的示例我已經連接了商店

type Props = ConnectedProps<typeof connector>
const mapDispatchToProps = { updateTask };
const connector = connect(mapStateToProps, mapDispatchToProps);
export default connector(Tasks)

然后在子任務中我想使用 updateTask 因為我不想將每個任務連接到 redux

任務看起來像

type Props = {
  updateTask: typeof updateTask
}

但該代碼導致

類型 '(taskId: string, updatedTask: Partial) => void' 不能分配給類型 '(taskId: string, updatedTask: Partial) => ThunkAction'。 “void”類型不能分配給“ThunkAction”類型。

當然，因為它不通過 redux connect

所以我的問題是使用“react-redux”庫中的InferThunkActionCreatorType是否安全？

type Props = {
  updateTask: InferThunkActionCreatorType<typeof updateTaskAndPropagate>
}

定義是

export type InferThunkActionCreatorType<TActionCreator extends (...args: any[]) => any> =
    TActionCreator extends (...args: infer TParams) => (...args: any[]) => infer TReturn
        ? (...args: TParams) => TReturn
        : TActionCreator;

這正是我需要的相同函數參數，但返回類型為 void

Answer 1

是的，這是您用例的完美類型。 它是Connect類型（連接函數的簽名）中使用的內容，因此它准確地模仿了您正在尋找的內容。

所以你會做

type Props = {
  updateTask: InferThunkActionCreatorType<typeof updateTask>
}

哦，以防萬一你不知道：現在有一個ConnectedProps類型可以讓你更輕松地輸入connect ： 文檔

通常可能會派上用場:)