2

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.

  • 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 09 '18 at 10:21
  • 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? –  Aug 09 '18 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 09 '18 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. –  Aug 09 '18 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 09 '18 at 12:17
  • I'm not sure we're talking about the same thing. Redux expects you to make a **deep copy** of the current state, work on that copy the way you want it and then return **this copy** as a new state. See https://redux.js.org/recipes/structuringreducers/immutableupdatepatterns (§ Correct Approach: Copying All Levels of Nested Data). If one has a Reducer containing 100 fields, then changing only 1 of them would require one to copy all 100 into a new state, modify that 1 field inside a copy and then return this copy as a new state. Am I missing something? –  Aug 10 '18 at 08:51

1 Answers1

1

Usually building a state from props complicates code a lot, you have to map props both in constructor and 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

mpospelov
  • 1,510
  • 1
  • 15
  • 24