I would like to make my app change state when I'm refreshing my browser but not when I'm just refreshing my states.
How can I do it?
In the run function for the application you can call
$state.go('home'); // whatever state
and it will result in the app always going to the home state when you hit the refresh button. Run is only executed when the app is loaded not on state changes.
Related
So I have a React app where it has an App component. Inside this app component, I'm reaching out to the server to check the user's auth status. Now I only want to check this one time when the app is opened for the first time.
I'm also using react-router-dom for routing. Now the problem is when I enter a path manually in the address bar it renders my App component again. The same doesn't happen when I navigate with the Link component of react-router-dom. Because of this behaviour, my auth status sets to false (it is default to false in App) even when the user is logged in. Then it again reaches to the server, and then sets the auth status to true again. How can I fix this so that the app component doesn't re-render and I don't see that login screen even for a while when I'm logged in when entering paths manually?
First query the localstorage for Auth Status and if it returns fail, Query with api call and add Auth Status to localStorage and proceed further. asat!
You may suspect of what would happen if user manually update the local storage. Since if you send the auth tokens on every api. No need to worry about that.
Have a great day :)
I'm using react-router to navigate within my app. But this causes to reload the whole page when I route to a new path (=URL). This means the app looses it's global state (managed by react-redux).
So, my question is: how can I navigate within the app without loosing it's global state?
You have to use NavLink instead of a link tag, NavLink lets you navigate without refreshing the page, otherwise, the global state always gets lost when your refresh the app, Another solution you can use localStorage to persist data, and when you go back to the app you add your data to your store from localStorage.
I have a react/redux app and when file changes and I hit save it refreshes the page and clears
all redux data.I know t that I can persist redux data to localstorage. What I would love to know
is that is it the default behaviour of react/node server to refresh the page when file changes? If not how can I prevent it?
Is it a default behaviour? : YES, it is.
This is known as live-reloading where a change in your file refreshes your local server and restarts the app setting all state to initial ones.
But the problem as you mentioned is that the state of the app is lost.
There is another concept called hot-reloading which prevents it. Hot reloading will just replace the modules which have changed while the app is running. This won't cause a total refresh of the app. It will just update the page with the changes without a reload, and so will maintain the state of the app. However, the state of the component,i.e, the react state isn't maintained.
Now, when you create a react project using CRA, the hot reload feature is built in. You can try it by running your app and changing some css. You will notice that the app doesn't refresh but the changes are applied!!
However, if you try doing this in a JSX file, the entire app changes. This is because there are some changes that needs to be done to enable hot reloading in a JSX file.
Go to the index.js and write this line of code:
if (module.hot && process.env.NODE_ENV !== 'production') {
module.hot.accept();
}
If you go and make a change to your JSX file now, you will see that the updates are applied without refresh.
BUT, the react state aren't maintained. There is a library called the react-hot-loader, which can help you in maintaining the react state too.Try it out!
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
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.