How to wait for information (currentUser) before componentDidMount
up vote
0
down vote
favorite
I have a user profile page, when I refresh the page my redux store clears and then I have a fetch all the information again from the backend... but my profile page begins to mount before I get that information back.
I this function in my "loggedInRoutes.js". It will get the currentUser from the JWT token I have in localStorage, and save the userName and ID, etc, in my Redux Store
componentDidMount()
if (localStorage.length===0)
this.props.history.push('/')
else
this.props.dispatchCurrentUser()
It's in the top level of my routes, the switch statement with my route rendering is in the same page.
In my profile page. (I need to check if the currentUser is friends with the user who's profile I went to, that's why I need both infos from the start).
componentDidMount()
this.props.fetchProfile(this.props.currentUser, this.props.match.params.userId)
this.requestFriendshipFunction()
This works if I already have the currentUser in my redux store, but if I do a page refresh while on the profile page, the componentDidMount in the profile page gets called before I have that information, even though I'm calling the "dispatchCurrentUser" in a more container/parent component "loggedInRoutes".
Saving the currentUser info in local storage seems like a bad idea, and I'm not sure where to go from here.
Thank you.
reactjs redux
asked Nov 11 at 18:37
Francis
112
add a comment |
up vote
0
down vote
favorite
I have a user profile page, when I refresh the page my redux store clears and then I have a fetch all the information again from the backend... but my profile page begins to mount before I get that information back.
I this function in my "loggedInRoutes.js". It will get the currentUser from the JWT token I have in localStorage, and save the userName and ID, etc, in my Redux Store
componentDidMount()
if (localStorage.length===0)
this.props.history.push('/')
else
this.props.dispatchCurrentUser()
It's in the top level of my routes, the switch statement with my route rendering is in the same page.
In my profile page. (I need to check if the currentUser is friends with the user who's profile I went to, that's why I need both infos from the start).
componentDidMount()
this.props.fetchProfile(this.props.currentUser, this.props.match.params.userId)
this.requestFriendshipFunction()
This works if I already have the currentUser in my redux store, but if I do a page refresh while on the profile page, the componentDidMount in the profile page gets called before I have that information, even though I'm calling the "dispatchCurrentUser" in a more container/parent component "loggedInRoutes".
Saving the currentUser info in local storage seems like a bad idea, and I'm not sure where to go from here.
Thank you.
reactjs redux
asked Nov 11 at 18:37
Francis
112
Just don't render a components which needs to know about the user and display a placeholder or spinner while it fetching. Wrap that components with HOC or add a check to all of them.
– Kort
Nov 11 at 18:50
Okay so if I have it display a loader while I wait for my redux store to populate, where in my profile page do I make the API call (this.props.fetchProfile) to the backend. I have it in componentWillReceiveProps but from what I've read that's not ideal.
– Francis
Nov 11 at 20:50
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have a user profile page, when I refresh the page my redux store clears and then I have a fetch all the information again from the backend... but my profile page begins to mount before I get that information back.
I this function in my "loggedInRoutes.js". It will get the currentUser from the JWT token I have in localStorage, and save the userName and ID, etc, in my Redux Store
componentDidMount()
if (localStorage.length===0)
this.props.history.push('/')
else
this.props.dispatchCurrentUser()
It's in the top level of my routes, the switch statement with my route rendering is in the same page.
In my profile page. (I need to check if the currentUser is friends with the user who's profile I went to, that's why I need both infos from the start).
componentDidMount()
this.props.fetchProfile(this.props.currentUser, this.props.match.params.userId)
this.requestFriendshipFunction()
This works if I already have the currentUser in my redux store, but if I do a page refresh while on the profile page, the componentDidMount in the profile page gets called before I have that information, even though I'm calling the "dispatchCurrentUser" in a more container/parent component "loggedInRoutes".
Saving the currentUser info in local storage seems like a bad idea, and I'm not sure where to go from here.
Thank you.
reactjs redux
asked Nov 11 at 18:37
Francis
112
I have a user profile page, when I refresh the page my redux store clears and then I have a fetch all the information again from the backend... but my profile page begins to mount before I get that information back.
I this function in my "loggedInRoutes.js". It will get the currentUser from the JWT token I have in localStorage, and save the userName and ID, etc, in my Redux Store
componentDidMount()
if (localStorage.length===0)
this.props.history.push('/')
else
this.props.dispatchCurrentUser()
It's in the top level of my routes, the switch statement with my route rendering is in the same page.
In my profile page. (I need to check if the currentUser is friends with the user who's profile I went to, that's why I need both infos from the start).
componentDidMount()
this.props.fetchProfile(this.props.currentUser, this.props.match.params.userId)
this.requestFriendshipFunction()
This works if I already have the currentUser in my redux store, but if I do a page refresh while on the profile page, the componentDidMount in the profile page gets called before I have that information, even though I'm calling the "dispatchCurrentUser" in a more container/parent component "loggedInRoutes".
Saving the currentUser info in local storage seems like a bad idea, and I'm not sure where to go from here.
Thank you.
reactjs redux
reactjs redux
asked Nov 11 at 18:37
Francis
112
asked Nov 11 at 18:37
Francis
112
asked Nov 11 at 18:37
Francis
112
asked Nov 11 at 18:37
Francis
112
asked Nov 11 at 18:37
Francis
112
112
Just don't render a components which needs to know about the user and display a placeholder or spinner while it fetching. Wrap that components with HOC or add a check to all of them.
– Kort
Nov 11 at 18:50
Okay so if I have it display a loader while I wait for my redux store to populate, where in my profile page do I make the API call (this.props.fetchProfile) to the backend. I have it in componentWillReceiveProps but from what I've read that's not ideal.
– Francis
Nov 11 at 20:50
add a comment |
Just don't render a components which needs to know about the user and display a placeholder or spinner while it fetching. Wrap that components with HOC or add a check to all of them.
– Kort
Nov 11 at 18:50
Okay so if I have it display a loader while I wait for my redux store to populate, where in my profile page do I make the API call (this.props.fetchProfile) to the backend. I have it in componentWillReceiveProps but from what I've read that's not ideal.
– Francis
Nov 11 at 20:50
Just don't render a components which needs to know about the user and display a placeholder or spinner while it fetching. Wrap that components with HOC or add a check to all of them.
– Kort
Nov 11 at 18:50
Just don't render a components which needs to know about the user and display a placeholder or spinner while it fetching. Wrap that components with HOC or add a check to all of them.
– Kort
Nov 11 at 18:50
Okay so if I have it display a loader while I wait for my redux store to populate, where in my profile page do I make the API call (this.props.fetchProfile) to the backend. I have it in componentWillReceiveProps but from what I've read that's not ideal.
– Francis
Nov 11 at 20:50
Okay so if I have it display a loader while I wait for my redux store to populate, where in my profile page do I make the API call (this.props.fetchProfile) to the backend. I have it in componentWillReceiveProps but from what I've read that's not ideal.
– Francis
Nov 11 at 20:50
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53251913%2fhow-to-wait-for-information-currentuser-before-componentdidmount%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Just don't render a components which needs to know about the user and display a placeholder or spinner while it fetching. Wrap that components with HOC or add a check to all of them.
– Kort
Nov 11 at 18:50
Okay so if I have it display a loader while I wait for my redux store to populate, where in my profile page do I make the API call (this.props.fetchProfile) to the backend. I have it in componentWillReceiveProps but from what I've read that's not ideal.
– Francis
Nov 11 at 20:50