Неверный вызов ловушки - React Redux - PullRequest
Новая
       34

Неверный вызов ловушки - React Redux

0 голосов
/ 23 октября 2019

Я пытаюсь реализовать статический метод, чтобы сделать мой код чище. Он работал нормально, пока я не попытался сделать это: 

// 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())
    }
}

Ответы [ 3 ]

1 голос
/ 23 октября 2019

Вы не можете использовать 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>
1 голос
/ 23 октября 2019

Вы пытаетесь использовать реактивный крюк в классе. Это невозможно.

Вы должны быть в функциональном компоненте, чтобы использовать хуки.

Если вам нужно использовать класс, вы можете подключить свой компонент с помощью connect () HOC.

0 голосов
/ 23 октября 2019

Вот правила React Hooks :

  • Call Hooks из компонентов функции React
  • Call Hooks из пользовательских Hooks

Кажется, что вы вызываете хук useDispatch из внешней функции (ни компонента функции, ни customHook), поэтому вы получаете эту ошибку.

Вы можете вызвать const dispatch = useDispatch(); dispatch(signOut()); внутри своего компонента или, если вы действительно хотите сохранить класс Auth, вы можете вызвать функцию dispatch непосредственно из хранилища (без использования хуков) следующим образом: 

 import store from './path/to/your/store'

 export class Auth {
   static signOut = () => {
     store.dispatch(signOut())
   }
 }
...