无效的挂钩调用-React Redux

Question

我正在尝试实现一个静态方法，以使代码更干净。它一直运行良好，直到我尝试这样做：

// Auth.js
import {useDispatch} from 'react-redux';
import {signOut} from './redux_actions';
export class Auth {
static signOut = () => {
const dispatch = useDispatch();
dispatch(signOut())
}
}
// Menu.js
import {Auth} from '../../auth'
...
...
<MenuItem onClick={() => {Auth.signOut()}}><ExitToAppIcon className="icon"></ExitToAppIcon><span>log out</span></MenuItem>

然而，我得到了一个错误：

Invalid Hook call, You might have mismatching versions of React and React DOM.
You might be breaking the Rules of Hooks.
You might have more than one copy of React in the same app

我真的不知道自己做错了什么。也许我仍然没有真正了解架构。谢谢你的帮助！

编辑：

根据公认的答案，这是

import { myStore } from './index'
export default class Auth {
static signOut = () => {
myStore.dispatch(signOut())
}
}

Answer 1

以下是React Hooks的规则：

• 从React函数组件调用钩子
• 从自定义挂钩调用挂钩

您似乎是从外部函数(也不是函数组件，也不是customHook(调用钩子useDispatch，这就是为什么会出现此错误。

您可以在组件内部调用const dispatch = useDispatch(); dispatch(signOut());，或者如果您真的想保留Auth类，您可以直接从存储中调用dispatch函数(不使用钩子(，如下所示：

import store from './path/to/your/store'
export class Auth {
static signOut = () => {
store.dispatch(signOut())
}
}

Answer 2

您正试图在类中使用react钩子。这是不可能的。

您必须在一个功能组件中才能使用钩子。

如果需要使用类，可以使用connect((HOC连接组件。

Answer 3

不能在事件处理程序中使用useDispatch或任何其他挂钩。挂钩只能在顶层使用。

这应该有效：

export class Auth {
static useSignOut = () => {
const dispatch = useDispatch();
return () => dispatch(signOut())
}
}
// Menu.js
import {Auth} from '../../auth'
...
...
const signOut = Auth.useSignOut(); // now `useDispatch` is called at top level
<MenuItem onClick={signOut}><ExitToAppIcon className="icon"></ExitToAppIcon><span>log out</span></MenuItem>