Question

我正在看这里的async 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时访问此处的调度？

Answer 1

如果您未指定 connect功能，则dispatch功能会自动将props传递给您的mapDispatchToProps。考虑到这一点：

export default connect(mapStateToProps)(App)

它应该有效。 You can read more about the react-redux bindings in the docs

Answer 2

如果我理解正确，你想从componentDidMount调用dispatch作为this.props中的一个函数（我不推荐，检查redux如何工作并创建你需要的动作创建者）。即便如此，为了实现这一点，你可以做到：

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

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

Answer 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' ]} />
    ...
  );
}

dispatch未在componentDidMount中定义

3 个答案: