My app makes a get request when the user navigates to a profile page, and there are params in the url to request the data. Should this data be stored in Redux, or is it better to make the request within the component and save it in React state? I am generally not persisting the data anywhere else in the app once a user has viewed the page.
Related
I have user data which includes Email,Username,Password,ShippingAddress etc..
I am storing jwt token in localStorage, the token is includes :username,id,createdAt..
I want the user data to be persisted to my redux-store but I can't figure out how to do it.
I don't want user info to be in local storage but on the other hand everytime I refresh the page my user data from redux getting deleted, I kinda stuck.
Tried to do simple check that if localstorage(jwt) id is equal to the user that just logged in - store the data in store and it works, but as I said one refresh delete all..
Would like to get some hints\tips from the pros! :)
Using: graphql\apollo, redux toolkit, react.
My best idea was to have requests from the server on every component that I need username \ email \ password ..etc but I think it will be too massy..
React is just JavaScript, and as such, any data that is stored in React will not persist and will be lost when the page is refreshed. Any information that you want to persist after a page refresh will need to be stored somewhere else (i.e. local storage).
There are ways to retrieve information from local storage and store them (non-permanently) in Redux after every page reload. How that solution looks will differ depending on how you are using React.
If you are using functional components and hooks, the useEffect hook can be used to retrieve data from localStorage after every page reload. Click here to read the docs on useEffect. It might look something like this:
useEffect(() => {
const storedData = JSON.parse(localStorage.getItem("storedData"));
// save to component's state or redux here.
}, []);
If that useEffect is placed somewhere in your app component, it will run on every re-render, thereby making it seem like the data is persisting in React because it will always be there.
Normally the flow that you would have should be smth like:
User logs in e.g /api/v1/login,
Sever returns either a temporal token (in case you are using otp codes or 2fa), or the user jwt that will be used for authorizing subsequent requests.
Token is saved in local storage.
When the user refreshes the page you check local storage and use the token on a request to the server (this way you can check it's still valid, normally you can do smth like /api/v1/user to get the user data.
If the token is valid then you can store the user info returned by the API call into the redux store. If not you can redirect user to login page again
I'm currently using React + Redux in my app. When my user login I make all calls to API to stock the data in different reducers.
I recently added a personalized picture that goes into that reducer in base64 format. With that change, if a user has 3/4 pictures if their is a reload, the application reducer where pictures are become empty, as if a limitation was touch.
How should I proceed? One call by webpage? One specific call for the picture page?
Thank you
Redux state will always be reset, after a refresh. If you want to persist something to stay there after a refresh, you need to use redux-persist, or sessionStorage/localStorage. If you want to make sure that the user info stays up to date, you could make the call, to fetch the user data, in the componendDidMount function of the root component (the app component that gets rendered for each page), so that it gets called after every refresh, on each page.
When user navigation to app ex: http://myapp.mydomain.com
I initialize a bunch of stuff, make requests to auth the user based on a cookie etc. This setup the main state of my main-reducer.
If a user navigation directly by pasting let say: http://myapp.mydomain.com/userProfile
The main state, will never be setupped. So the trick I'm using is putting the last part of the url (userProfile) in a cookie (or somewhere else) and redirecting to http://myapp.mydomain.com. After auth and requests, I the redirect back to the page the user wants to view. This works, but feels wrong. I was wondering: is there a better way of doing that?
Thanks!
Why don't you just make the route /userProfile as protected route.
Only if the user is authenticated he can see that page if not redirect to root page and re-validate the user.
For example, if I have page called home.
When a user logs in, he will see his avatar on the navigation bar.
If a user does not log in, he can see a log in button on the navigation bar.
I use Redux to manage state, and React Router to do the routing.
My problem is, on the server side, how to know which view to render.
You can create sessions and maintain the state in react accordingly. For every page request you can check that if the sessionid is present in the request headers. Then check wether it is the correct session id on the server side and return true value or thatever you want to return. And then maintain the sate accordingly. Now as you have got the state so you can render whatever you want to render.
I have only started with react and redux and designed the login -sign up page.
Have an action that calls login-sign up API and a corresponding reducer.
I display some of this information on page and use it on some others. Now, I would like this state to be maintained when the browser is reloaded. How do I do it?
I have this header component binding this action that logs the user in.
Usually, you either store the state in localStorage, e.g. by using redux-persist or fetch the initial state from your server.