React多组件共享Redux操作函数时useDispatch报错解决

你在单组件内运行正常的Redux更新逻辑如下：

const handleCBLabelText = (position: string, text: string) => {
    dispatch({
        type: 'CB_LABEL_TEXT_ADD_FOR_POSITION',
        cbLabelStation: position,
        cbLabelText: text
    })
    setTimeout(() => {
        dispatch({
            type: 'CB_LABEL_TEXT_REMOVE_FOR_POSITION',
            cbLabelStation: position
        })
    }, 1500)
}

为遵循DRY原则在多组件复用该逻辑，你将代码抽离到公共shared.ts文件后触发如下报错：

Line 4:18:  React Hook "useDispatch" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks

当前编写的公共文件代码为：

import {useDispatch} from "react-redux";
export {handleCBLabelText}

const dispatch = useDispatch();


const handleCBLabelText = (position: string, text: string) => {
    dispatch({
        type: 'CB_LABEL_TEXT_ADD_FOR_POSITION',
        cbLabelStation: position,
        cbLabelText: text
    })
    setTimeout(() => {
        dispatch({
            type: 'CB_LABEL_TEXT_REMOVE_FOR_POSITION',
            cbLabelStation: position
        })
    }, 1500)
}

报错触发的核心原因是违反了React Hooks的调用规则：

• useDispatch是React Redux提供的Hook，仅允许在React函数组件顶层、自定义Hook顶层调用
• 你在普通TS模块的顶层作用域直接执行useDispatch()，不符合Hooks调用要求，因此被规则校验拦截

复用带Hook依赖的公共逻辑，标准做法是封装为自定义Hook，命名必须以use开头，符合Hooks规则校验要求。

1. 新建公共Hook文件，例如src/hooks/useCBLabelText.ts，代码如下：

import { useDispatch } from "react-redux";
import { useCallback } from "react";

export function useCBLabelText() {
  const dispatch = useDispatch();

  const handleCBLabelText = useCallback((position: string, text: string) => {
    dispatch({
      type: 'CB_LABEL_TEXT_ADD_FOR_POSITION',
      cbLabelStation: position,
      cbLabelText: text
    });

    const timer = setTimeout(() => {
      dispatch({
        type: 'CB_LABEL_TEXT_REMOVE_FOR_POSITION',
        cbLabelStation: position
      });
    }, 1500);

    // 返回清理函数，避免组件提前卸载导致内存泄漏
    return () => clearTimeout(timer);
  }, [dispatch]);

  return { handleCBLabelText };
}

2. 在任意需要使用该逻辑的组件中调用即可：

import { useCBLabelText } from '@/hooks/useCBLabelText';

export default function DemoComponent() {
  const { handleCBLabelText } = useCBLabelText();

  // 业务中直接调用，例如绑定点击事件
  return (
    <button onClick={() => handleCBLabelText('left', '提交成功')}>
      提交
    </button>
  );
}

如果不想使用自定义Hook，可以直接导入项目中初始化的Redux Store实例调用dispatch，完全绕开Hook规则限制：
公共工具文件代码：

// 替换为你项目中store的实际导入路径
import store from '@/store/index';

export const handleCBLabelText = (position: string, text: string) => {
  store.dispatch({
    type: 'CB_LABEL_TEXT_ADD_FOR_POSITION',
    cbLabelStation: position,
    cbLabelText: text
  });
  setTimeout(() => {
    store.dispatch({
      type: 'CB_LABEL_TEXT_REMOVE_FOR_POSITION',
      cbLabelStation: position
    });
  }, 1500);
};

该方案可直接在任意组件、普通TS文件中导入函数使用，但会造成公共逻辑和Store实例强耦合，不利于单元测试和后续维护，非特殊场景不建议使用。

注意：原实现没有处理setTimeout的清理逻辑，若组件在1500ms倒计时结束前卸载，会触发内存泄漏、以及组件卸载后更新状态的警告，自定义Hook方案中已返回定时器清理方法，可按需结合组件生命周期调用。

内容的提问来源于stack exchange，提问作者grisuu