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 to wrap my components. Do I need to do anything from the home component? — Jithesh Nair, Dec 18 '18 at 11:10
I mean you need to do the same thing you did to `login`. `connect(mapStateToProps)(Home)` — Yury Tarabanko, Dec 18 '18 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, Dec 18 '18 at 11:28

score 1 · Accepted Answer · answered Dec 18 '18 at 11:25

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 '18 at 11:25

Praveen Rao Chavan.G

2,772
3
22
33

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 – Jithesh Nair Dec 18 '18 at 11:30
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? – Francisco Souza Sep 05 '19 at 16:39

score 0 · Answer 2 · answered Dec 18 '18 at 11:19

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 '18 at 11:19

Muljayan

3,588
10
30
54

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. – Jithesh Nair Dec 18 '18 at 11:26

score 0 · Answer 3 · answered Dec 18 '18 at 11:30

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 '18 at 11:30

Rohith Nair

1,080
1
17
33

How to access store data in components using react-redux

3 Answers3