Реагировать на Redux mapStateToProps 'props' не определено

Question

Я новичок в Redux и застрял в разработке. Похоже, мой mapStateToProps не передает реквизит. Я получаю сообщение об ошибке "'props' не определен no-undef"

Мой код:

  <div className="modal-footer">
                <label className="pull-left login_b">
                  Have an account? Login! {props.counter}
                </label>
                <input
                  onClick={this.handleSignup}
                  type="button"
                  id="btn_signup"
                  className="btn btn-primary pull-right"
                  defaultValue="Sign Up"
                />
              </div>

const mapStateToProps = state => {
  return {
    counter: state.counter
  };
};

export default connect(mapStateToProps)(Signup);

Вот мой редуктор:

import SIGNUP from "./signupType";

const initialState = {
  login: "",
  counter: 1
};
const signupReducer = (state = initialState, action) => {
  switch (action.type) {
    case SIGNUP:
      return { counter: state.counter };

    default:
      return state;
  }
};

export default signupReducer;

Что я я делаю не так?

- ЗДЕСЬ НЕКОТОРЫЕ ОБНОВЛЕНИЯ -

Вот мои действия:

export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";

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

export const decrement = () => {
  return {
    type: DECREMENT
  };
};

Вот мой редуктор:

import { INCREMENT, DECREMENT } from "./../actions/counter";

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

export default counterReducer;

Вот мой компонент:

<div className="btns_flx" style={{ padding: "20px" }}>
                <button
                  type="button"
                  className="btn_main_prev"
                  onClick={this.props.increment}
                >
                  <img src="imglast/chevron-left.svg" alt="" />
                  Back {this.props.counter}
                </button>
                <div></div>

                <button
                  type="button"
                  className="btn_main_next"
                  onClick={this.props.decrement}
                >
                  Next
                </button>
              </div>

const mapStateToProps = state => {
  return {
    counter: state.counterReducer
  };
};

const mapDispatchToProps = dispatch => {
  return {
    decrement: () => dispatch(decrement()),
    increment: () => dispatch(increment())
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(EnterAddress);

Здесь интересно, что в mapStateToProps мне нужно указать свое имя редуктора для отображения состояния заказа, после этого моя функция диспетчеризации не работает.

Как я могу исправить мою функцию mapDispatchToProps?