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.
Related
When I run my react app in the browser, everything works fine. But when I edit a file and it gets saved, I can still see the whole app but when I try to interact with it, it doesnt work, I did inspect element and saw that the body that does not contain anything. Yet the content is visible?
Any solutions?
Note , when I reload the page everything is working fine, but its annoying to have to reload the page everytime.
Next JS is based on Reactjs and this might be helpful for you:
Limitations
Fast Refresh tries to preserve local React state in the component
you're editing, but only if it's safe to do so. Here's a few reasons
why you might see local state being reset on every edit to a file:
Local state is not preserved for class components (only function components and Hooks preserve state).
The file you're editing might have other exports in addition to a React component.
Sometimes, a file would export the result of calling a higher-order component like HOC(WrappedComponent). If the returned
component is a class, its state will be reset.
Anonymous arrow functions like export default () => ; cause Fast Refresh to not preserve local component state. For large
codebases you can use our name-default-component codemod.
As more of your codebase moves to function components and Hooks, you
can expect state to be preserved in more cases.
You can read more about FastRefresh from the documentation.
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
I'm confused about the right way of using redux and react.
Lets say in my home http://myapp/ I display a list of books, and I populate in my state an array books[] containing title and id. Each line in the home have a link to a page with book details, let's say http://myapp/book/123. When I load that route, I go to the server, fetch the data, create an action and reduce to have the book with id 123 filed with the details, so page can render properly. Is this the correct approach?
An if it is ok, whats if I use a link http://myapp/book/123 directly? My app does not pass trough the home, so initial state is not initialized... I'm sure there is something wrong in my approach, but can't figure out.
I found that Redux complicates things a lot. Since react introduced hooks I prefer to use hooks and simple context. You may find that your application does not need Redux at all. This may help: replace redux react hooks context api
I got a question while working with React-redux/redux-form.
I build SPA using React-Router.
React-router uses redux as you know.
What I want to know is the render-flow when you change redux-form-field.
1. user inputs text in redux form field
2. redux form updates redux store
3. Then, all components connected with store are re-rendered.
(It means that all page is refreshed in my case, because I use react-router)
React uses virtual-dom, so twinkles can't be notified.
I'm sorry that I can't express my thinking due to lack of English.
I look forward to hearing your opinions
I am converting a jsp multi-page app(mpa) into a React single-page app (spa). In the mpa, the back button worked and the form retained its state.
In my new React app, the back button works but the form does not retain its state.
Question: is there a trick to make my form retain its state after "backing" to it (in an spa).
Here are the two solutions I came up with:
Encode the entire form state into the url. Then update the browser history with an updated url every time the form changes. But, this seems like a huge pain in the butt.
Modify the structure of my app such that the form in question (a React Component) stays mounted (and just use the css visibility or display property to show and hide). But, in a large app, leaving every page mounted in the DOM seems like it might lead to performance problems.
By the way, I am using popstate and the browser history api to achieve SPA behavior (i.e. i have rolled my own router) as described here.
Hopefully someone can propose a solution that is better than my two solutions. Thanks.
I ended up using something similar to Wylie Кулик's answer with a few changes:
I didn't want to switch to Redux for just this one use-case. So I used the component state of my top-level component (i.e. a component higher up the tree).
I cached the form's state on the form component's componentWillUnmount and restored the cached state on componentDidMount.
I passed the cached state as a prop from the higher component to the child component.
It ended up being a very small amount of code and is working like a charm so far.
Use Redux to have a state store which transcends any particular component. Then in your component, as part of the form submission process, dispatch an action with payload of all of the form data. This should be cached on state and then when the component is remounted by your navigation structure, it should have access to this cache via Reduxsconnectfunctions mapStateToProps method. You can repopulate your form from that.
It's not clear from your question whether or not you are submitting the form in the traditional old way. I would use e.preventDefault in the handler instead, and have all the form data on the component's state, this can be sent to Redux's state store as described above, and Ajaxed off with superagent or similar. At the same time it can be cached.
Redux: http://redux.js.org