Redux Reddit API示例中"selectedSubreddit"从何而来

Question

全部：

我是Redux的新手，当我学习它的Reddit API示例时，有一个代码片段让我非常困惑：

在AsyncApp.js中，有：

componentDidMount() {
    const { dispatch, selectedSubreddit } = this.props
    dispatch(fetchPostsIfNeeded(selectedSubreddit))
  }

我想知道dispatch和selectedSubreddit在哪里绑定到这个.props？

感谢

Answer 1

该示例使用react redux中的connect()函数将redux状态的某些部分和商店的dispatch()函数作为道具注入该组件中。有关更多信息，请参阅Redux文档中的"使用React"部分。

例如：

App.js:

export class App extends Component {
  //...
}
function mapStateToProps(state) {
  const { selectedReddit, postsByReddit } = state
  const {
    isFetching,
    lastUpdated,
    items: posts
  } = postsByReddit[selectedReddit] || {
    isFetching: true,
    items: []
  }
  return {
    selectedReddit,
    posts,
    isFetching,
    lastUpdated
  }
}
export default connect(mapStateToProps)(App)

这里的connect()函数采用上面的mapStateToProps()函数，将Redux状态的适当部分作为道具注入<App />组件中。mapStateToProps()返回的对象的键对应于注入的道具的名称，对应的值就是注入的道具值。

connect()还可以采用第二个参数matchDispatchToProps()，该参数可用于在组件中注入特定的操作调度函数作为道具。无论您是否向connect()提供任何参数，它都会将Redux商店的dispatch()函数作为一个名为dispatch的道具注入。

这些连接的容器组件从存储中接收状态更新，因此当您的Redux状态发生变化时，连接的容器部件将相应地接收新的道具。