reactjs - 如何访问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内可用的 Prop .

App.js

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

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

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

Answer 1

当您使用 Provider 时，作为 Provider 高阶组件的子组件的任何组件都可以通过使用 connect 函数访问存储属性。

因此，您可以在 Provider 的子组件中添加以下内容并访问 Score 属性

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

export default connect(mapStateToProps)(MyComponent)

但是，如果这个其他组件是 App 组件的直接子组件，那么您也可以将 score prop 作为 prop 传递给该组件来自类似的应用程序

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