如何在React/Redux中获取引用？

Question

在我的ReactJS通用组件中，我写了以下代码：

const mapStateToProps = (store) => {
  return {
    cars: store
  }
}

export default connect(mapStateToProps)(SearchForm)

在同一组件中，我想要派发一个如下的 action:

 store.dispatch({type: 'SHOWDETAIL', data: 'hi'});

当运行时，我得到以下结果:

Uncaught TypeError: _create2.default.dispatch is not a function

我是否可以在组件中获取到 store 的引用，以便我可以触发 action？

- bier hier

---

请查看文档中的简单ToDo应用程序：http://redux.js.org/docs/basics/UsageWithReact.html - tomr

我不认为这是那么简单，但还是谢谢！ - bier hier

Answer 1

connect 将会以状态作为参数而不是 store 来调用 mapStateToProps。

在你的情况下，似乎不需要引用 store，仅使用 connect 将 dispatch 映射到 props 即可。

const mapStateToProps = (store) => {
  return {
    cars: store
  }
}

const mapDispatchToProps = dispatch => {
  return {
    action : () => dispatch({
      type : 'ACTION_NAME'
    })
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(SearchForm)

如果你真的想要这个 store，应该从创建它的地方导出它，并在需要它的地方导入它，connect 不是传递 store 的目的。

- Anis Smail

---

我该如何实际分发这个动作呢？我尝试了 this.props.action() 但是没有任何反应。 - bier hier

很奇怪，这个 this.props.action() 应该是可以工作的，你能提供一个可以复现这个问题的 codepen 链接吗？ - Anis Smail

Answer 2

你获取的不是 store 对象的引用，而是 store 内部状态的引用。connect 函数的第二个参数是 mapDispatchToProps，它使你可以访问 dispatch 函数。

- Andreas Grünh