Действие не запускается - пример счетчика реагирования с избыточностью

Question

Я пытаюсь настроить свой реактивный проект с помощью redux, и я следую основному c примеру с counter, который я могу увеличивать и уменьшать. Счетчик корректно отображается на странице как 0 изначально - однако, когда я нажимаю кнопку, действие increment не отправляется, и, как следствие, счетчик не обновляется.

Мой LoginPage.js:

/* eslint-disable no-unused-expressions */
import { connect } from "react-redux";
import React, { Component } from "react";
import { selectCounter } from "./../../selectors/counter";
import { actions as counterActions } from "./../../actions/counter";

class LoginPage extends Component {
  componentDidMount() {}

  render() {
    const { counter, increment } = this.props;
    return (
      <div>
        <p>{`Hi ${counter}`}</p>
        <button onClick={() => increment()}>+</button>
      </div>
    );
  }
}

LoginPage = connect(
  (state, props) => ({
    counter: selectCounter(state, props)
  }),
  { ...counterActions }
)(LoginPage);

export default LoginPage;

Мой actions/counter.js:

import { INCREMENT } from "./../types/counter";

const increment = () => {
  return { type: INCREMENT };
};

export const actions = {
  increment
};

Мой /reducers/counter.js:

const { INCREMENT, DECREMENT } = "./../types/counter";

const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case INCREMENT:
      return state + 1;
    case DECREMENT:
      return state - 1;
    default:
      return state;
  }
};

module.exports = { counterReducer };

Мой /reducers/index.js:

import { combineReducers } from "redux";
import { counterReducer } from "./counter";

const rootReducer = combineReducers({
  counter: counterReducer
});

export default rootReducer;

Я опускаю файлы App.js и index.js, поскольку они довольно просты и, похоже, не связаны с проблемой.

ОБНОВЛЕНИЕ:

Мой actions/counter.js:

import { INCREMENT } from "./../types/counter";
import { useDispatch } from "react-redux";

const increment = () => {
  return { type: INCREMENT };
};

const mapDispatchToProps = dispatch => {
  return {
    increment: () => dispatch(increment())
  };
};

export const actions = {
  ...mapDispatchToProps(useDispatch)
};

Теперь я вижу ошибку:

react-dom.development.js:14724 Uncaught 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

Answer 1

Обновлено
Необходимо правильно определить функцию mapDispatchToProps и передать ее connect(). В вашем коде increment(), похоже, не отправляет действие.

const mapDispatchToProps = (dispatch) =>{
    increment: ()=>dispatch(actions.increment())
}

LoginPage = connect(
  (state, props) => ({
    counter: selectCounter(state, props)
  }),
  mapDispatchToProps
)(LoginPage);

Обновление Ошибка связана с использованием useDispatch() внешнего компонента. Он должен быть объявлен и использован внутри функционального компонента.