How to access store data in components using react-redux

Question

I have two independent components called login and home. I have used mapStateToProps in login component to pass data.

function mapStateToProps(state) {
  return { loginData: state.agent };
}

export default withRouter(connect(mapStateToProps)(login));

A button click from the login component will navigate us to the home page. I want to get and display all the 'loginData' values in the home component. I have tried this.props.loginData in home comp. But didn't get the store data. Any suggestions on this?

@YuryTarabanko - I'm new to react. I have used <Provider store={ store }> to wrap my components. Do I need to do anything from the home component? — Jithesh Nair
– Jithesh Nair, Commented Dec 18, 2018 at 11:10
I mean you need to do the same thing you did to login. connect(mapStateToProps)(Home) — Yury Tarabanko
– Yury Tarabanko, Commented Dec 18, 2018 at 11:12
@YuryTarabanko - Now I'm able to get the data in mapStateToProps function of the home component. How can I get this data to the componentDidMount method? — Jithesh Nair
– Jithesh Nair, Commented Dec 18, 2018 at 11:28

Praveen Rao Chavan.G · Accepted Answer · 2018-12-18 11:25:27Z

1

To access the this.props.loginData in your homepage component, even there you need to use mapStateToProps like the way you have used in login component.

function mapStateToProps(state) {
  return { loginData: state.agent };
}

export default withRouter(connect(mapStateToProps)(homepage));

then you will able to access this.props.loginData

If you want to access the Redux store data in any component you need to use connect and make use of mapStateToProps to connect the store values to your props.

answered Dec 18, 2018 at 11:25

Praveen Rao Chavan.G

2,8803 gold badges24 silver badges37 bronze badges

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

2 Comments

Jithesh Nair Over a year ago

Thanks! It works. Could you please tell me how to get this loginData in componentDidMount of home component. When I'm trying with this.props.loginData -- 'Undefined' it what I'm getting

Francisco Souza Over a year ago

I am using connect export default connect(stateToProps)(AuthorizedRoute); in my main route where all the routes are mounted, how can I access redux data on store on other components? Like in HomePageComponent?

Muljayan · Accepted Answer · 2018-12-18 11:19:13Z

0

My suggestion would be to fire an action to fill the redux store with the details the user has entered after being logged in. After that can use mapStateToProps in the home page to get the details from the redux store.

answered Dec 18, 2018 at 11:19

Muljayan

3,92611 gold badges36 silver badges58 bronze badges

1 Comment

Jithesh Nair Over a year ago

I have already used action and a reducer. I'm able to get the store data in the login page itself, but not able to pass it to another component.

Rohith Nair · Accepted Answer · 2018-12-18 11:30:39Z

0

You can pass in data via state property

If you are using history.push

How to pass params with history.push in react-router v4?

similar with redirect

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md

answered Dec 18, 2018 at 11:30

Rohith Nair

1,0701 gold badge17 silver badges33 bronze badges

Collectives™ on Stack Overflow

How to access store data in components using react-redux

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related