reactjs - 使用Effect清理函数Typescript错误: not assignable to parameter of type 'EffectCallback'

Question

我有这段代码应该执行以下操作:

• 在第一次渲染后发送一个 thunk 加载数据
• 发送一个 Action 来重置状态作为该效果的清理函数

由于 dispatch 和 slug 在此组件生命周期内不会更改，因此清理基本上会在组件卸载后运行。

const dispatch = useDispatch();
const slug = props.match.params.slug || "";

useEffect(() => {
  dispatch(THUNKS.LOAD_DATA(slug));
  return () => { dispatch(ACTIONS.RESET_STATE()); };
},[dispatch,slug]);

一切都按预期进行。但我想将清理函数编写为:

return () => dispatch(ACTIONS.RESET_STATE());

我知道箭头函数会添加一个隐式的 return 语句 if 当我这样写的时候。所以基本上我要返回 dispatch() 调用。

因此，Typescript 会报错并显示以下错误消息:

Argument of type '() => () => { payload: undefined; type: string; }' is not assignable to parameter of type 'EffectCallback'.

我认为正在发生的事情:EffectCallback 可能期望 void 作为 return，突然我返回了一个 dispatch ()调用。

我能否以某种方式自定义类型 EffectCallback 以接受此返回调用并消除此错误？

Answer 1

问题是 dispatch 实际上返回了 action 对象，所以它不是 void 函数。您只想忽略返回值。

我有一个可能看起来很愚蠢的解决方案，除非这是您经常使用的模式，因为我们所做的只是将花括号移动到另一个地方。但它可能是一个地方而不是许多地方。

我们可以用实际上不返回任何内容的自定义版本覆盖 useDispatch，而不是打乱 typescript 定义。

import { useDispatch as useRegularDispatch } from "react-redux";
import { Action, AnyAction } from "redux";

export interface VoidDispatch<A extends Action = AnyAction> {
  <T extends A>(action: T): void;
}

export const useDispatch = <A extends Action = AnyAction>(): VoidDispatch<A> => {
  const regularDispatch = useRegularDispatch();

  return (action: A) => { regularDispatch(action); };
};

然后您可以在 useEffect 清理中使用 dispatch 而不会出现任何问题。