I am new to React and wanted to know that Why State is preferred upon Link?
-I want to redirect the user to another page, in that case does a state change makes more sense or adding Link would be equally good?
Thanks in Advance :)
If you want to change the component with state change, then its a pretty wrong idea, you will face the following issues
When you refresh the page, it will go to the initial state page, solution: in this case you need to store your page state in Redux Store instead of local state.
You cannot go to a specific page, with a route, for example, you wanna go to user profile page, directly using a link, then you cannot go, because you will be directed to your initial state page
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?
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
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
I am using redux to store my state. It works properly when i navigate to the same page (multiple components but on a single page). But when I open in a link in new tab/window, the state becomes undefined.
Based on findings, the redux state is expected to reset when refreshing a page or opening in new tab/window. What I then thought of is to pass store.getState() as a param when navigating to another component so that if the component sees that the state is undefined, it will access its props state (passed on by the previous component).
Now, when a link is opened in new tab, I need to pass the state. I am using react-router for navigation. Currently, the state is passed onto other page when I just click on the link. But when I open the link in new window/tab, the state, again, becomes undefined. I'm using this to navigate to the specified link:
<Link to={link}>{value}</Link>
where link is a const containing the pathname and state(store.getState()) I need to pass.
I have found many similar stackoverflow questions[e.g. programmatically-navigate-using-react-router]. I've tried using
<a onClick={history.push(link)}>
but it doesn't seem to work. Maybe I'm using it the wrong way. The other ones I just can't figure out how to use/implement in this context.
Please give sample code snippets aside from just explaining. I'm quite a beginner in redux/react.
Thanks!
The first thing that you should check is that you are using the correct version of React-Router. I am unsure if that approach will work in anything besides V4.
If you are indeed using React-Router V4 and it still doesn't work. Another cleaner approach you can take that will save the state not only after redirects to new tabs/windows but also after refreshes, is to save the state of your application in the local storage.
This video by Dan Abramov explains how to do it.
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.