I use React and React-Router, and I have a top-level component <App/> that contains all the session data. Whenever I navigate to a different page, I lose the state information. How can I persist the state data across all the pages? (If that is not possible, is there a different way I should be implementing my session data?)
You could use session storage (sessionStorage) to store data items you want to persist across pages. This is not sent to the server and will disappear when the session is over. (You could also use localStorage for things you may want to persist from one visit to the next.
I use Redux it stores the data you want outside the components and you can connect in where ever you like.
Related
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?
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.
I have a react application which will contains dozens of screen for admin panel. I decided to open pages in tabs that integrated to react-router. When i change the current page and return back same page everything entered on inputs are being disappeared.
What is the best practice for this problem. It should be scaleable and must not require to write code in every page developed by a developer.
Also I use Redux for transferring userContext and appContext to every screen. Is Redux usable to store every input or other components' values?
It's possible to create store for keeping input valus. You may update does valus on input changes and check if the store object has value on componentDidMount you can import values from store to inputs.
React state is good for storing data inside a component and even to pass it to its children. It is not ideal for passing data among siblings. This is the exact case you have described above with dozens of components that do not share parent-child relationship.
The ideal solution for this problem is Redux. When you application state is stored in Redux, you can easily switch pages and not loose any data. Moreover, you can store the same Redux state in localStorage to prevent data loss due to browser refresh or shutdown. Lastly, if a need arises to persist your data in a database, fetch all the store values into props with mapStateToProps and pass them to backend.
I want to store my rendered component (in ReactJs) into browser history of clients, but I don't want to use Redux for it, because it is so complicated for me.
Is any way for using local storage or cookies as alternative solution for Redux and React Routing?
Edit:
I need to using react route with cache rendered data, It means after route change and got back to previous page again, rendered data still remains there and no need to send request to server again! Like this Redux example, But need to do it without Redux.
Thanks.
Redux is a state management, not related to cache or local storage. If you want to cache your components then you should look at this https://developer.mozilla.org/en-US/Apps/Fundamentals/Offline
You need to create manifest which will store your components in the cache.
I'm pretty new to React and Redux and I've been setting my environment in the past week.
I was wondering if their was such a thing as a refresh button that doesn't refresh the whole page but just the components containing the props that have changed in the store.
Example :
User_1 changes the store.
User_2 clicks a refresh button on his page (container).
The components containing props that have been modified are refreshed for User_2.
The perfect situation would be if User_2's interface components would refresh as soon as User_2 does the action, but I don't think it's possible yet. (If it is, please mention it)
Thanks in advance
UPDATE:
If you use GraphQl, it's worth looking into their "subscription" solution.
If your two user's are on different computers, then the store is not shared between them. Changes made to one user's store are not going to impact the store of a second user.
It sounds like what you really want is websockets. But this would be something you need to manage with the server-side of your application first, and which react/redux would merely consume.
In general, components will always instantly update when their props change. If a component didn't update, then it's props are still the same.