4 ms·

Yes, we specifically recommend that most "form state" should _not_ go directly into Redux: - https://redux.js.org/style-guide/style-guide#avoid-putting-form-st

Yes, we specifically recommend that most "form state" should _not_ go directly into Redux: - https://redux.js.org/style-guide/style-guide#avoid-putting-form-state-in-redux https://redux.js.org/style-guide/style-guide#avoid-putting-f... - https://redux.js.org/faq/organizing-state#should-i-put-form-state-or-other-ui-state-in-my-store https://redux.js.org/faq/organizing-state#should-i-put-form-... In other words: it's fine to take data that's in the Redux store, use that to initialize a React form, do the form updates in local state, and then dispatch an action containing the final results when the form is complete. But, there's almost never a good reason to dispatch a Redux action on every keystroke. You don't need to track that level of granularity in the Redux DevTools, other components in the app are unlikely to need to see those individual updates, and it's a waste of update and subscription handling.

Joker_vD 5y ago
By the way, about that "dispatch an action containing the final results when the form is complete" — what is the Correct Way™ to do this, if there may be several instances of the form? They should produce different actions so that different pieces of state would be updated.
- acemarke 5y ago
  "It Depends"? :) Typically if you've got a single React component type that is supposed to be reused in multiple places with differing behavior, the right answer is "pass in something as a prop". In this case, that could be a callback function that dispatches the correct action, so the form component can just do `props.onFormCompleted(data)`, and the differing usage sites can pass in different callbacks that dispatch different actions.
arenaninja 5y ago
If only my PMs had cared... I previously worked on a monstrosity where the input state was owned by the backend via huge incomprehensible metadata updates. Every keystroke had to be submitted (and thus actions fired) because a field update could invalidate other fields on the grid and the user could feel the latency (~400ms roundtrip?) between each keystroke. The backend team was sure they had discovered some magic sauce and I noped out of there before my next bonus

Joker_vD 5y ago

By the way, about that "dispatch an action containing the final results when the form is complete" — what is the Correct Way™ to do this, if there may be several instances of the form? They should produce different actions so that different pieces of state would be updated.

acemarke 5y ago
"It Depends"? :) Typically if you've got a single React component type that is supposed to be reused in multiple places with differing behavior, the right answer is "pass in something as a prop". In this case, that could be a callback function that dispatches the correct action, so the form component can just do `props.onFormCompleted(data)`, and the differing usage sites can pass in different callbacks that dispatch different actions.

arenaninja 5y ago

If only my PMs had cared... I previously worked on a monstrosity where the input state was owned by the backend via huge incomprehensible metadata updates. Every keystroke had to be submitted (and thus actions fired) because a field update could invalidate other fields on the grid and the user could feel the latency (~400ms roundtrip?) between each keystroke. The backend team was sure they had discovered some magic sauce and I noped out of there before my next bonus