Buffering Form Changes and Dispatches

Investigating Form Actions

With that cleanup done, back to work on our input forms. In the previous section, I mentioned that “there’s one problem with our text input that we need to address”, and promised we’d come back to that later. Later is now :)

Let’s type the letters “test” into the end of the “Unit Name” field, and look at the DevTools actions log:

We can see four different UNIT_INFO_UPDATE actions in that list from typing “test” into the name input. If we look at the next-to-last action, we can see that after typing the ‘s’, the dispatched name was “Black Widow Companytes”.

Right now, every single time we type a keystroke into the name input, we dispatch another Redux action. Every time we dispatch an action, every connected component gets notified, and has its mapState function run. As an example, that means that for every keystroke, all the <PilotsListRow> components are busy looking up their Pilot entries. But… all we really wanted to do was update the name input! None of the Pilots data is going to change from us typing here, so all that is wasted effort. The dispatched actions are also kind of cluttering up the actions log.

As mentioned previously, Project Mini-Mek really isn’t a performance-critical application, and especially not at this stage of development. Still, it would be nice if we could cut down on the number of actual Redux actions dispatched.

A Reusable Form Buffering Solution

I noted some of the issues with dispatching actions from form inputs while working on early prototypes for my own application. I needed a solution that could do several things for me:

• Handle onChange events from input components
• Respond to those change events by immediately passing the updated values back down to the input, for fast UI response
• If several changes happened close together, only dispatch a single Redux action after they were all done, with the final values
• Be generic enough that I could reuse it in a variety of different places.

I started playing around with some ideas, and eventually came up with a component I dubbed the “FormEditWrapper”. (As you may have noticed, nothing is more permanent in programming than a temporary name. We’ll call it FEW for short.)

My FormEditWrapper is a reusable, generic component that can buffer input changes in its own component state, combine those changes with incoming props, and debounce changes to minimize the number of dispatched Redux actions.. Let’s look at the source, and I’ll explain how it works.

Commit eb38ac3: Add FormEditWrapper component ...