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
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?
Problem:
When I click pokemon details on next pages, after going back, app is fetching everytime first 12 pokemons.
I want after going back to stay on current page.
Link to code sanbox
https://codesandbox.io/s/bitter-pine-57iwo?file=/src/components/Pokemon/PokemonList.js
If you want to keep your pagination state, i'd recommend use use a state management tool, such as Redux, Even React context can handle this one.
As you are using the prev/next url approach, i don't think it would be good to store this values on the queryParams from the list route.
So, yeah, go for state management.
https://github.com/reduxjs/redux-thunk
https://reactjs.org/docs/context.html
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'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.
I have some routes within my application. There are some UI changes within a same route. For example, when I click a button, I get resources from the server and display it as a list. I want to mark this point as a separate browser history, so that when the user clicks back from any next route, I am taken back directly to the list instead of the button.
For example,
Route -A > Button is displayed
Upon click,
Route A -> List is displayed
Now when item is clicked
Route B -> Item is displayed.
Now if I click back from Route B, I want to be taken back to Route A with list instead of the button. How can I achieve this?
Any ideas?
I'll assume your app is an SPA (single page application). Routing is then just another way of maintaining application state. Therefore I see two common ways to resolve this:
Create another sub-route for showing list
Implement custom state management. In this case, when you go back to your route you would restore state. Many people will use Redux for global state management, but you are free to set up your own infrastructure.
Either way, you need a way to tell your view that it should render with a state different than the default.
I hope that helps.