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子代的组件都可以通过SQLite函数访问商店属性。

因此，您可以在任何属于Provider子级的组件中添加以下内容并访问得分支持

Install-Package SQLiteNetExtensions-netstandard -Version 2.0.0-alpha3 -Pre

但是，如果此其他组件是connect组件的直接子组件，那么您也可以将function mapStateToProps(state) { return { score: state.score, status: state.status }; } export default connect(mapStateToProps)(MyComponent)作为App从App传递给此组件，如

score prop

Answer 2

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

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

2 个答案: