typescript 使用 actionType 作为子组件中的属性对 redux 和 redux-thunk 做出反应

Question

我有两个组件的示例 Tasks 和 Task 在父组件 Tasks 我已经连接了 store

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

然后在子 Task 我想使用 updateTask 因为我不想将每个任务都连接到 redux

任务看起来像

type Props = {
  updateTask: typeof updateTask
}

但该代码导致

类型 '(taskId: string, updatedTask: Partial) => void' 不可分配给类型 '(taskId: string, updatedTask: Partial) => ThunkAction'。类型“void”不可分配给类型“ThunkAction”。

当然，因为它不通过 redux 连接

所以我的问题是使用“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：documentation

一般会派上用场:)