在处理API调用的非组件函数中使用useDispatch触发无效Hook调用问题

useDispatch是React Redux提供的Hook，必须严格遵循React Hook的调用规则：

• 只能在React函数组件的顶层调用
• 只能在自定义Hook的顶层调用

你在auth.js的普通异步函数signIn里调用useDispatch，完全违反了这个规则，所以触发了"无效Hook调用"的错误。

这里提供三种可行的解决方式，根据你的项目需求选择：

1. 将dispatch作为参数传入函数 #

在调用signIn的组件中先获取dispatch，再把它作为参数传递给signIn函数：

• MainApp.js

import { useDispatch } from 'react-redux';
import { signIn } from './scripts/auth';

function MainApp() {
  const dispatch = useDispatch();

  return (
    <button onPress={() => signIn(dispatch)}>登录</button>
  );
}

• scripts/auth.js

export async function signIn(dispatch) {
  // 这里执行API调用逻辑
  // ...
  dispatch(setIsAuthed(true));
}

2. 封装为自定义Hook #

把登录逻辑封装成自定义Hook，这样就能合法地在Hook内部使用useDispatch：

• scripts/auth.js

import { useDispatch } from 'react-redux';
import { setIsAuthed } from '../path/to/your/actions';

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

  const signIn = async () => {
    // 执行API调用逻辑
    // ...
    dispatch(setIsAuthed(true));
  };

  return { signIn };
}

• MainApp.js

import { useAuth } from './scripts/auth';

function MainApp() {
  const { signIn } = useAuth();

  return (
    <button onPress={signIn}>登录</button>
  );
}

3. 直接使用store实例（不推荐复杂场景） #

如果你的项目是直接创建了Redux store实例，可以直接导入store并调用dispatch：

• scripts/store.js（假设你有这个文件）

import { configureStore } from '@reduxjs/toolkit';
// 导入reducer等
export const store = configureStore({ /* 配置 */ });

• scripts/auth.js

import { store } from './store';
import { setIsAuthed } from '../path/to/your/actions';

export async function signIn() {
  // 执行API调用逻辑
  // ...
  store.dispatch(setIsAuthed(true));
}

注意：这种方式在服务端渲染、动态注入store的场景下可能会有问题，仅推荐在简单的客户端单页应用中使用。

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