After refresh page Redux store are set to null - reactjs

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

Related

Persist the data after refreshing the page in reactjs

I made a comment application using react
I have three input types (text, link, image) I want them still present the data even after refreshing (reload) the page
You can use localStorage for this. Have a look at localStorage

How to stop Redux resets state when using window.open to redirect a URL

I have a simple login page, when the informations are correct, I redirect the user to another url via window.open() with _self parameter. Eg: window.open("/home", "_self");
The problem is, I save this login information to the Redux store, but naturally Redux resets the store because of window.open()'s page load. I can't use Link on Login button.
So is it possible to redirect to another URL without page load (not using Link as I mentioned) or avoid Redux reset state action?
You might want to use Redux Persist which allows you to store your redux state in the local storage of your device and when your react app renders initially hydrate your redux from the redux persist OR you can pass in query param that indicates somethings like
yourURL.com?isLoggedIn=true
and trap in the query param and render your component as needed.
Hope this helps.
I had to solve it via Link, giving to parameter's value with ternary operator.

React save global state before page refresh

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

How to retain information for the logged in user on page reload or different tabs in browser

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.

react redux state changed to initial after browser refresh

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.

Resources