在 componentDidMount 中未定义调度答案

【问题标题】：dispatch not defined in componentDidMount在 componentDidMount 中未定义调度
【发布时间】：2017-02-06 15:10:24
【问题描述】：

我在这里查看异步 redux 示例：

https://github.com/reactjs/redux/blob/master/examples/async/src/containers/App.js

如果我添加以下内容：

function mapDispatchToProps(dispatch) {
    return {};
}

export default connect(mapStateToProps,mapDispatchToProps)(App)

然后在componentDidMount中不再定义dispatch。为什么是这样？使用 mapDispatchToProps 时如何在此处访问调度？

【问题讨论】：

标签： reactjs redux

【解决方案1】：

如果您没有指定mapDispatchToProps 函数，connect 函数会自动将dispatch 传递给您的props。考虑到这一点：

export default connect(mapStateToProps)(App)

它应该可以工作。 You can read more about the react-redux bindings in the docs.

【讨论】：

【解决方案2】：

如果我理解正确，您想从 componentDidMount 调用 dispatch 作为 this.props 中的一个函数（我不建议这样做，请检查 redux 的工作原理并创建您需要的动作创建器）。即便如此，要实现这一点，您也可以这样做：

function mapDispatchToProps(dispatch) {
   return { dispatch };
}

这会创建一个 dispatch 属性，它是 dispatch 函数本身。不过，不要在实际用例中这样做，继续阅读有关 redux action.creators 的内容。

【讨论】：

【解决方案3】：

按照给定的示例，您可以像这样将mapDispatchToProps 传递给connect

function mapDispatchToProps(dispatch) {
  return {
    onClick: nextReddit => {
      dispatch(selectReddit(nextReddit));
    }
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

然后组件App 将被赋予一个道具onClick，其用法如下。

handleChange = nextReddit => {
  this.props.onClick(nextReddit)
}

render() {
  ...
  return (
    ...
    <Picker value={selectedReddit}
            onChange={this.handleChange}
            options={[ 'reactjs', 'frontend' ]} />
    ...
  );
}

【讨论】：