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);

我的App.js看起来像：

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

我用Provider包装应用程序，如下所示：

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

任何帮助表示赞赏。

Answer 1

弄清楚了，我不是在render语句之前初始化动作创建者。

通过在render语句之前添加它来解决此问题

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

Answer 2

您需要将您的操作映射到道具并进行调度，其外观应如下图所示

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

然后您将其称为-this.props.changeGreen()