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.
Related
Using the router, window.location, the link element and also the href provided by react to my knowledge do generally not cause a re-fetch of the entire react application but only cause a mounting of a new component. Is that correct?
But if I for example change the URL in the browser's URL bar from localhost:4000/hello to localhost:4000/bye will that cause a re-fetch of the entire react application or does react somehow stop the browser from doing that by recognizing that it is the same domain?
And what about the behaviour of the browser's refresh and back buttons in regards to this matter?
if you change URL by window api its refetch whole react again. but if you change URL by react router api its only change page components
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.
I’m making a simple app with react-routing component.When user enter in /config path, it open a configuration page where he can choose element from select.
After this, user save data and the application set state of main component correctly (App.js). Then i make a “view change” using history to return in home (/ path).
The problem is : if user click on second time in /config routes, it lose all previous change made on DOM and it seems to be a new istance.
How i can preserve user interaction after first change? I cannot understand if i need to make a state inside this (Config.js) or there are an alternative solution.
Thanks for all
If you have an app level configuration which should be preserved between renders/navigation you should consider using some sort of a state management like Redux or you should store your config inside sessionStorage/localStorage (sessionStorage keeps track only while your browser tab is active = not closed. localStorage saves for the future when user closes and reopens your app).
Learn more about Web Storage API on how to use sessionStorage and localStorage.
NOTE: When you navigate away from your component, it gets unmounted which means that the component's state is destroyed/trashed. That's probably the situation you're facing now with your project.
You need to store the data/state/config somewhere. If it's just a few things (nothing heavy or complex), you can use localStorage (it saves the data between sessions, doesn't matter if you close tab and open it again)... But if you need to have a greater control over the app's state you should consider diving into Redux Store.
Have in mind that by default redux doesn't support data persistence so you'll need to plug-in Redux Persist package to achieve that (it's like saving in localStorage, but now the whole Redux (with all the states) will be saved between sessions)
I am not sure what you mean by
lose all previous change made on DOM
Where do you store these changes made and could you not check for this state and render the contents of the /config component or even the component itself depending on whether or not the changes to the state have been made?
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
In the app I am working on I have a state that is chosen in a dropdown by the user. I would like this state to still be the same after the user refreshes the page
Two options:
Store the state in the url by adding "/:state"
We must hit the api endpoint again to get the data based on the state. So it is always fresh
The url can be stored in history and copied/bookmarked
Everytime the state is changed by the user, the url changes causing a reload of the page
Store the state in redux and persist it
Have to install a package like redux-persist which takes some configuration
data persists on page reload so we don't need another api call
data may be outdated and need to be re-pulled
Which option is better? What scenarios break either option?
Everytime the state is changed by the user, the url changes causing a reload of the page
If you use something like react-router, app doesn't reload each time you change url.
Decision where to store some setting depends on the case. I usually prefer to store in url only things that are related to navigation: changing views/pages, opened modals, search/filters. Usually you want to store it in url when you want this url to be shareable with other users. So it you want to put some dropdown value in url, consider: Do you want browser navigation to change this value? Does this dropdown change some view?
Also, sometimes you have to store this selection on backend. Usually when it is a property of some entity or it's a setting. You have to consider whether you want this dropdown's value to be shared between multiple sessions on different devices.