How to access store in second component in react-redux

Question

I have a single component App.js where I trying to save state using redux. In index.js where I set store for only <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 map state to props which is available inside App.js.

App.js

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

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

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

Shubham Khatri · Accepted Answer · 2017-06-18 17:57:48Z

20

When you are using Provider any component that is children of the Provider Higher Order Component can access the store properties though the use of connect function.

So you can add the following in any component that is a child of Provider and access the score prop

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 App component then you can also pass the score prop as a prop to this component from App like

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

answered Jun 18, 2017 at 17:57

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

N Sharma Over a year ago

Can you suggest how to add multiple child of the Provider ?

Shubham Khatri Over a year ago

simply render the component inside the provider component <Provider store={store}><App /><MyComponent/></Provider>,

N Sharma Over a year ago

Can we access store like context.store ? I am getting Line 94: 'context' is not defined no-undef let store = context.store;

Shubham Khatri Over a year ago

Not sure, as to how you are using it. But certainly the above method is the way to go

sudo Over a year ago

Congrats, this answer is better than every tutorial and official documentation I've read on react-redux. Including the quick start, which is utterly useless.

Dayan Moreno Leon · Accepted Answer · 2017-06-18 17:50:44Z

6

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

answered Jun 18, 2017 at 17:50

Dayan Moreno Leon

5,4552 gold badges25 silver badges24 bronze badges

4 Comments

N Sharma Over a year ago

I tried like render() { let store = context.store; but I am getting an error Line 94: 'context' is not defined no-undef

Dayan Moreno Leon Over a year ago

in your compoent you need to declare contextTypes and if you are using class based components would be this.context

N Sharma Over a year ago

let store = this.context.store; console.log(store); I am getting undefined on console

Dayan Moreno Leon Over a year ago

did you declare the contextTypes? look at this thread github.com/reactjs/react-redux/issues/…

Collectives™ on Stack Overflow

How to access store in second component in react-redux

2 Answers 2

5 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related