关于reactjs:如何访问react-redux中第二个组件中的存储

How to access store in second component in react-redux

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

index.js

1
2
3
4
5
6
7
let store = createStore(scoreReducer);

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

我在App.js中有此方法可将状态映射到道具,而道具在App.js内部可用。

App.js

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

到目前为止一切都很好,现在我不确定如何在另一个组件中访问{ this.props.score}吗?

如果要访问另一个组件中的{this.props.score},我需要在index.js和第二个组件中进行哪些更改?


在使用提供程序时,通过使用connect函数,作为提供程序高阶组件的子级的任何组件都可以访问商店属性。

因此您可以在Provider子级的任何组件中添加以下内容,并访问得分道具

1
2
3
4
5
function mapStateToProps(state) {
  return { score: state.score, status: state.status };
}

export default connect(mapStateToProps)(MyComponent)

但是,如果此其他组件是App组件的直接子代,那么您也可以像

一样将score prop作为prop传递给App到此组件

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


Provider组件为其所有子组件设置上下文,并在其中提供存储。当您使用高阶组件(HOC)connect时,无论它们如何嵌套,都可以package任何组件并通过提供的mapStateToPropsmapStateToProps访问商店。您也可以使用上下文context.store访问商店,但不建议这样做。最好的方法是使用映射函数和connect(类似于App组件所具有的功能)。