如何在react-redux中访问第二个组件中的商店

Question

我有一个单独的组件App.js,我试图保存状态使用redux.在index.js中,我只为<App />组件设置存储.

index.js

let store = createStore(scoreReducer);

ReactDOM.render(
  <Provider store={store}><App /></Provider>,
  document.getElementById("root")
);
registerServiceWorker();

我有这个方法App.js来将状态映射到里面可用的道具App.js.

App.js

function mapStateToProps(state) {
  return { score: state.score, status: state.status };
}

到目前为止一切都很好,现在我不知道如何访问{ this.props.score}另一个组件？

index.js如果我想{this.props.score}在另一个组件中访问,我需要做什么更改和第二个组件？

Answer 1

当您使用Provider时,作为Provider Higher Order Component子级的任何组件都可以通过使用connect函数来访问store属性.

因此,您可以在作为Provider子级的任何组件中添加以下内容并访问score prop

function mapStateToProps(state) {
  return { score: state.score, status: state.status };
}

export default connect(mapStateToProps)(MyComponent)

但是,如果这个其他组件是组件的直接子App组件,那么您也可以从App 中将score propas作为a 传递prop给此组件

<MyComponent score={this.props.score}/>

Answer 2

Provider组件为其所有子组件设置上下文，并在其中提供存储。当您使用高阶组件（HOC）时，connect您可以包装任何组件并通过提供的组件访问商店mapStateToProps，mapStateToProps无论它们是如何嵌套的。您也可以使用上下文访问商店，context.store但不建议这样做。使用 map 函数 and connect，类似于您对App组件的使用，是最好的方法。