Practical Redux, Part 7: Form Change Handling, Data Editing, and Feature Reducers

[utterances-bot]

Practical Redux, Part 7: Form Change Handling, Data Editing, and Feature Reducers · Mark's Dev Blog

https://blog.isquaredsoftware.com/2017/01/practical-redux-part-7-forms-editing-reducers/

[kostasx]

Hello Mark!

While doing some research to come up with the appropriate solutions for a rather challenging Frontend project, I stumbled upon this article. It was exactly about what I was trying to figure out on our project: reduce the number of Redux state updates and dispatched actions when the users updated the input fields (without hitting submit or save).

The solution seems interesting enough to study in-depth and probably apply it to our project.

My questions are the following:

• How relevant or up-to-date is a solution from 2017?
• Is there a "standardized" or more up-to-date version of that?
• Does modern Redux solve this problem in some other way?
• Do you think it would make sense to rewrite the FormEditWrapper as a Functional Component in 2024?

Thank you for your time and for the great work on Redux!

[markerikson]

@kostasx :

Hah, this is definitely going back in the archives :)

The concept is still reasonably valid. Technically speaking, the code itself should still run fine. React still supports class components, still has React.cloneElement, etc.

That said, if I were going to use this kind of technique today, I would find some way to write it as a hook instead, for a few reasons:

• Class components are not standard today
• Yes, I could redo it as a function component, but the not-quite-a-HOC pattern is also not the most readable approach anyway
• From a dev perspective, custom hooks are generally the standard way to reuse custom logic like this

Also, note that this is all really React code. In fact, the only thing that really even relates to Redux in that component is the this.props.onChange() call, which in turn doesn't even have to be dispatching a Redux action - it could be any callback that got passed in as a prop. So, "modern Redux" doesn't relate to this - it's all about React.

I haven't needed a component like this on any project since I wrote this article. It's possible (or probable?) that something similar exists elsewhere, especially given the various form management libraries that have come out over the years.

If you do happen to rework this, I'd be interested in seeing what you come up with!

[kostasx]

Thank you so much for the immediate and detailed response @markerikson (and sorry for the delayed response on my part)!

That's what I roughly had in mind so I'm glad that you've confirmed those assumptions.

I'll be posting here in case we decide to move on with a Hook re-implementation of that pattern.

Once again, thanks a lot! 👍