javascript - 将 mapDispatchAsProps 定义为简单的 actionCreators 对象不会将 props 传递给组件

Question

阅读redux docs ，特别是在 react-redux 上，有一种不太详细的方法将操作创建者绑定(bind)到调度函数，使用一个简单的 actionCreators 对象，将其作为 2nd 参数传递redux 的 connect。

但是，如果我只是传入此对象或手动绑定(bind)操作创建者，则 this.props 为空(计数除外)。我没有在 props 中获得 increment、decrement、reset 或 dispatch 。在箭头函数中手动调用dispatch可以使函数出现在props中。

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

const mapDispatchToProps = {
  increment
};

export default connect(
  mapStateToProps,
  // WORKS: ******************** (manually calling action creator and dispatching new action)
  dispatch => ({
     increment: () => dispatch(increment())
  })
  // DOES NOT WORK: ************ (passing as simple 'actionCreators' object)
  // mapDispatchToProps,
  // DOES NOT WORK EITHER: ***** (manually binding action creators to dispatch)
  // dispatch => bindActionCreators(mapDispatchToProps, dispatch)
)(Counter);

上面的代码我已经简化了，但是代码沙箱是here 。

Answer 1

感谢 Emile Bergeron 的评论。

我有循环依赖。我的 index.js 正在从 Counter.js 导入组件。 Counter.js 中的组件从 index.js 导入操作创建者。当我将这些操作重构到一个单独的文件中时，它就起作用了。