Initialize state from props using rehydrated Redux store
Clash Royale CLAN TAG#URR8PPP
Initialize state from props using rehydrated Redux store
In my application I have a dialog window on which there are multiple input fields. What I want to do is to save user's input in the component's own state and only afterwards, say, inside "onClose" of the Dialog send the input to a redux store using "dispatch" function.
This way the dialog component would keep field data inside its own state.
The problem that I face is that I'm not sure what the best way is to rebuild dialog component state from information contained in the redux store.
If one refreshes the page with F5 or simply reloads it, then components lose their state and fields will appear blank, regardless of the fact that rehydrated redux store still contains valid input information.
The question is then, what is the best way to set components state from props? Moreover, doesn't it seem like an antipattern? What are some common techniques for such task?
One possibility is to set field values directly to those contained in "props". This would, however, imply that every small change of the input fields will result in copying and modifying redux store, which is slow & inefficient.
Agree that it might get complex, hence the question. This way implies copying whole state inside the reducer every time user inputs even one key inside a text field. Is that a common technique?
– Eval
Aug 9 at 10:23
You should not update all state, only changed value, so virtual DOM will rebuild only html that changed. You could also implement storing values to localStorage to prevent clearing after F5
– Sasha Kos
Aug 9 at 10:32
How can I not update all state of the store if there is an immutability constraint on the reducer's store? In Redux reducer you copy the state, change a given key and then return this state as a new one. You can't modify the store directly but rather have to get a deep copy of it and work on the copy.
– Eval
Aug 9 at 11:46
You should deep your knowledge in immutability. Updating reducer.attribute does not mean updating all state. It is easy to check. Create reducer with two attributes. Subscribe one component to one attribute and second - to another. Than try to dispatch only one attribute update and you'll see that only one component have been updated
– Sasha Kos
Aug 9 at 12:17
1 Answer
1
Usually building a state from props complicates code a lot, you have to map props both in constructor and getDerivedStatesFromProps.
constructor
getDerivedStatesFromProps
I prefer to write component functions which return value based on passed props.
As you mentioned it may impact perfomance, to fix it you can use memoize-one library.
For more details you can check the following answer
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
I think good practice is: if you store field in redux - use it, otherwise your code became pretty complex. PS about slow and inefficient - that's really not true. Writting few fields to redux cant affect on performance
– Sasha Kos
Aug 9 at 10:21