How to access storage in the second component in a reduction reaction

Question

I have one component of App.js where I am trying to save state using redux . In index.js, where I install the repository only for the <App /> component.

index.js

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

I have this method in App.js to display the state in the details available inside App.js

App.js

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

Everything is fine so far, now I'm not sure how to access { this.props.score} in another component?

What changes do I need to make in index.js and the second component if I want to access {this.props.score} in another component?

Answer 1

When you use the Supplier, any component that is a child of the component of a higher supplier order can access the warehouse properties using the connect function.

So, you can add the following to any component that is a child of the Provider and gain access to the account

 function mapStateToProps(state) { return { score: state.score, status: state.status }; } export default connect(mapStateToProps)(MyComponent) 

However, if this other component is a direct child of the App component, you can also pass score prop as prop this component from the application, for example

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

Answer 2

Component

Provider sets the context for all its children, providing it with storage. when you use a high-order component (HOC) connect , you can wrap any component and access the repository through the provided mapStateToProps and mapStateToProps no matter how nested they are. You can also access the repository using the context context.store , but this is not recommended. Using the map and connect functions, similar to what you have with your App component, is the best approach.