Использование диспетчера в компоненте, основанном на классе, приводит к ошибке неверного вызова ловушки.

Question

Я новичок в react-redux. У меня есть этот код, я использую react, redux и TypeScript. В этом коде используется компонент, основанный на классе, и я хочу использовать dispatch для вызова действия для увеличения значения counter, но это дает мне следующую ошибку.

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

Вот мой код компонента, основанный на классе :

import React from 'react';
import { connect, useDispatch } from 'react-redux';
import { Dispatch } from 'redux';
import { increment, decrement } from '../actions/counterAction';

interface IHome {
    counter: 0
}

class Home extends React.Component<IHome> {
    render() {
        const dispatch = useDispatch();

        return (
            <div>
                This is the home page {this.props.counter}
                <button onClick={()=>dispatch(increment)}>+</button>
                <button>-</button>
            </div>
        );
    }
}

const mapStateToProps = (state: IHome) => {
    return {
        counter: state.counter
    }
}

const mapDispatchToProps = (dispatch: Dispatch) => {
    return {
        increment: () => dispatch(increment()),
        decrement: () => dispatch(decrement())
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Home);

Я не знаю, в чем проблема.

Answer 1

Хук useDispatch() может использоваться только в функциональных компонентах.

Поскольку вы уже подключили свой компонент, вы уже передали избыточные действия (decrement и increment) своему компоненту. через props.

Однако вам нужно будет исправить интерфейс реквизита вашего компонента, так как в настоящее время TypeScript считает, что единственное допустимое свойство - counter.

interface StoreProps {
  counter: number
}

interface DispatchProps {
  increment: () => void;
  decrement: () => void;
}

type IHome = DispatchProps & StoreProps;

class Home extends React.Component<IHome> {
    render() {
        const { counter, increment, decrement } = this.props;
        return (
            <div>
                This is the home page {counter}
                <button onClick={()=>increment()}>+</button>
                <button>-</button>
            </div>
        );
    }
}

Answer 2

Дом является компонентом класса. Вы должны изменить его на функциональный компонент, если хотите использовать в нем хуки. В этом случае вы можете избавиться от вызовов функций connect и map ... и использовать ловушку useStore для хранилища.

export default const Home: React.FC<IHome> = () => {
  const dispatch = useDispatch();
  const store = useStore()

  return (
      <div>
          This is the home page {store.getState().counter}
          <button onClick={() => dispatch(increment())}>+</button>
          <button>-</button>
      </div>
  );
}