React Redux 中封装多个 Dispatch 操作的正确实践

问题分析：“Invalid Hook Call”错误

在开发 react 应用时，为了提高代码的可读性和可维护性，我们常常会将一些相关的逻辑封装到独立的函数中。当需要在一个辅助函数中执行多个 redux dispatch 操作时，一个常见的直觉是直接在该辅助函数内部调用 usedispatch hook 来获取 dispatch 函数，示例如下：

import { useDispatch } from 'react-redux';
import { function1, function2, function3 } from './actions'; // 假设这些是 Redux Thunk actions

export default function resetAllDb() {
  // 错误：在此处调用 useDispatch 违反了 Hooks 规则
  const dispatch = useDispatch(); 

  dispatch(function1());
  dispatch(function2());
  dispatch(function3());
}

export default const MyComponent = () => {
  const handeFormSubmit = () => {
    // 调用封装的函数
    resetAllDb();
  };

  return (
    <div>
      <form>
        <button onClick={handeFormSubmit}>提交</button>
      </form>
    </div>
  );
};

然而，上述代码在运行时会抛出以下错误：

caught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

这个错误的核心在于违反了 React Hooks 的使用规则。useDispatch 是一个 React Hook，它必须且只能在以下两种场景中被调用：

1. React 函数组件的顶层： 即直接在函数组件的内部，而不是嵌套在循环、条件语句或普通 JavaScript 函数中。
2. 自定义 Hook 的顶层： 如果你创建了一个自定义 Hook（其名称以 use 开头），可以在其中调用其他 Hooks。

resetAllDb 函数是一个普通的 JavaScript 函数，并非 React 函数组件，也不是一个自定义 Hook。因此，在其中直接调用 useDispatch 违反了 React Hooks 的上下文规则，导致运行时错误。React 内部需要一个特定的渲染上下文来正确地跟踪和管理 Hook 的状态，而这个上下文只在组件渲染周期中可用。

解决方案：通过参数传递 dispatch 函数

解决这个问题的关键在于理解 dispatch 函数本身并不是 Hook，只有获取它的 useDispatch 才是 Hook。一旦通过 useDispatch 在合法的 React 函数组件中获取到了 dispatch 函数，这个 dispatch 函数就可以像任何其他普通的 JavaScript 函数一样被传递和调用。

因此，正确的做法是在需要使用 dispatch 的 React 函数组件中调用 useDispatch 来获取 dispatch 实例，然后将这个实例作为参数传递给你的辅助函数。

AI封面生成器

专业的AI封面生成工具，支持小红书、公众号、小说、红包、视频封面等多种类型，一键生成高质量封面图片。

108

查看详情

import { useDispatch } from 'react-redux';
import { function1, function2, function3 } from './actions'; // 假设这些是 Redux Thunk actions

// 辅助函数现在接收 dispatch 作为参数
export default function resetAllDb(dispatch) {
  dispatch(function1());
  dispatch(function2());
  dispatch(function3());
}

export const MyComponent = () => {
  // 在函数组件的顶层调用 useDispatch，这是合法的
  const dispatch = useDispatch();

  const handeFormSubmit = () => {
    // 调用辅助函数，并将 dispatch 实例传递给它
    resetAllDb(dispatch);
  };

  return (
    <div>
      <form>
        <button onClick={handeFormSubmit}>提交</button>
      </form>
    </div>
  );
};

在这个修正后的方案中：

1. MyComponent 作为 React 函数组件，在顶层调用 useDispatch()，这是完全符合 Hooks 规则的。
2. 获取到的 dispatch 函数被存储在一个常量中。
3. 当 handeFormSubmit 被调用时，它会调用 resetAllDb 函数，并将之前获取到的 dispatch 实例作为参数传递进去。
4. resetAllDb 函数现在不再尝试调用 useDispatch，而是直接使用传入的 dispatch 参数来执行 Redux actions。

这样，我们既实现了将多个 dispatch 操作封装到独立函数中的目标，又严格遵守了 React Hooks 的使用规则，避免了“Invalid Hook Call”错误。

注意事项

• 职责分离： 这种模式清晰地分离了关注点。React 组件负责 UI 渲染和获取 Hooks 提供的能力（如 dispatch），而辅助函数则专注于业务逻辑的编排（例如一系列 dispatch 操作的顺序）。
• 可测试性： 将 dispatch 作为参数传入，使得 resetAllDb 这样的辅助函数更容易进行单元测试。在测试时，你可以轻松地模拟（mock）dispatch 函数，从而验证 resetAllDb 是否按预期调用了正确的 action。
• 避免滥用： 这种模式适用于将一组相关的 dispatch 调用进行简单的封装。如果你的辅助函数开始需要访问其他 Hooks（如 useState, useSelector 等），或者需要管理自身的生命周期，那么它可能更适合被重构为一个自定义 Hook。自定义 Hook 本身就是用来封装可复用逻辑并允许在其中使用其他 Hooks 的。
• 性能考量： 对于频繁调用的辅助函数，每次都传递 dispatch 并不会引入显著的性能开销，因为 dispatch 函数本身在组件的整个生命周期内通常是稳定的。

总结

当需要将多个 Redux dispatch 操作封装到一个独立的、非组件的 JavaScript 函数中时，切记不能在该辅助函数内部调用 useDispatch。useDispatch 是一个 React Hook，必须遵循其严格的使用规则，即只能在 React 函数组件或自定义 Hook 的顶层调用。

正确的实践是：在 React 函数组件中通过 useDispatch 获取 dispatch 函数实例，然后将其作为参数传递给你的辅助函数。这种方法既能有效组织代码、提高可读性，又能确保应用程序符合 React Hooks 的规范，从而避免常见的运行时错误。通过这种方式，我们可以优雅地管理复杂的 Redux 异步操作序列，同时保持代码的整洁和可维护性。

以上就是React Redux 中封装多个 Dispatch 操作的正确实践的详细内容，更多请关注php中文网其它相关文章！