I'm using React to build an website where the user needs to login.
The website keeps states from the user.
This is the state of auth.
This state isn't changed much.
When I refresh the page my state gets refreshed too!
I want to keep the state if someone refreshes the page.
I looked at: https://hackernoon.com/how-to-take-advantage-of-local-storage-in-your-react-projects-a895f2b2d3f2 but that is only for states in current page only.
I want to save the main state of the app no matter on what page the user is on when page is refreshed.
How to do that?
I don't know what code you guys need, so ask me and Ill add it to the question.
I really need help with this.
You can save your state in localstorage using redux-persist. It will also update localstorage when redux state will be updated and persist when page reloaded
Related
Maintaining state - Let's say you were doing something on one tab, when you move to the next and come back you should see the same state.
Any refernce for this or how to achive this i am new to react
What you want here is a method to persist your data onto your browser, so you can dehydrate them whenever the user visits your page on different tabs.
Here you have an awesome step-by-step guide.
Essentially, the idea behind it, is you save your state data into your localStorage, so you can then retrieve them back whenever you need it
I am using Redux store to save the stage of my page in React js but after a refresh of the page the stored data are set again to null as default. There is a way to Redux store data are stored until user press logout button on the page.
Do you know how to save the state and after a page refresh it will not disappear ? Or there is a tutorial that I can see or read ?
this is because redux maintains state until you refresh the page. To solve this problem you need to either write your data to localstorage or use react-router-dom
in last case state on save in your app not use localstorage.
warning. react - it SPA based framefork. please, use react-router-dom!
https://reactrouter.com/web/guides/quick-start
I'm having a problem with ant design components. I have a table with document names and forms. After refreshing page, state cleares, although I don't clear it myself. How can I avoid it?
If I use defaultValue attribute, it doesn't help me because after refreshing it's empty. Does somebody have any idea how to save state after refreshing?
The local state in your component or even the redux-store will be cleared when the browser refresh. Because the are in-memory data.
If you want to preserve the state, then you can copy or take a snapshot of the sate and put it in your localstorage. You will have to copy the state to your local storage during window.onunload event. and when the page loads again get the values from local storage and patch them in you state
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.
I am making a react app using redux. I am going great except one issue.
Whenever I refresh the browser my state changed to initial state. Lets say I have a user authenticated and I have set him as authenticated: true and after authenticating when I refresh the page the state changed to initial and authenticated:false is set.
I am confused why is this happening ?
Can anyone point what might be the issue here
Redux stores are not persistent. When the page reloads, all data is initialized again. If you would like to save a piece of your store (or the whole thing) you will need to save it in localstorage, or saving it to your server and making a REST request asking for the data again.
You can use this package to save your store into localstorage.