Redux не может получить доступ к создателю действия перед инициализацией, используя mapDispatchToProps

Question

Я пытаюсь понять это уже несколько часов и не могу добиться успеха.

Вопрос: я получаю сообщение об ошибке «Невозможно получить доступ перед инициализацией» в этой строке:

const mapDispatchToProps = { changeGreen };

Я экспортирую создателя своего действия из индекса, например:

export const changeGreen = () => {
  return {
    type: GREEN_ON
  };
};

Я импортирую в MyComponent.js примерно так:

import { changeGreen } from "./index";

Я сопоставляю для отправки в файл компонента примерно так:

const mapDispatchToProps = { changeGreen };

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

My App.jsвыглядит так:

function App() {
  return (
    <div className='App'>
      <TrafficLight />
    </div>
  );
}

Я обертываю приложение с провайдером примерно так:

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

Любая помощь приветствуется.

Answer 1

Вы должны сопоставить свое действие с реквизитом и распределением, оно должно выглядеть следующим образом:

const mapDispatchToProps = (dispatch: any) => {
    return {
        changeGreen : bindActionCreators<any, any>(changeGreen , dispatch)
    }
}

Тогда вы бы назвали это так - this.props.changeGreen()

Answer 2

Понял, я не инициализировал создатель действия перед оператором рендеринга.

Исправил это, добавив его перед оператором рендеринга

changeGreen = () => {
    this.props.changeGreen();
  };