angular-redux / form

Keep your Angular2+ form state in Redux
MIT License
41 stars 15 forks source link

Proposal: A debounce Equivalent for Storing Form Inputs #46

Open maplion opened 6 years ago

maplion commented 6 years ago

This is a...

What toolchain are you using for transpilation/bundling?

Environment

NodeJS Version: 6.10.0 Typescript Version: 2.5.3 Angular Version: 4.2.0 @angular-redux/store version: 6.5.7 @angular/cli version: (if applicable): 1.4.7 OS: Windows

Issue and Propsal

Currently, I am utilizing angular-redux/form to capture my form data and I have validators in the reducer in order to keep all my logic within the reducer. Each time a value is entered into the form, my reducer listens to the @@angular-redux/form/FORM_CHANGED action that is fired by angular-redux/form and then performs validations against the inputs and changes state accordingly to give messages or whatever. Everything works great, except that the reaction is instantaneous and I would like the ability to debounce the user entries so they don't get insta-error messages for a better user experience.

I could accomplish this by subscribing to the .onValueChanges on the form with a debounce, which then fires off a custom action, which then does the validation. This seemingly defeats most of the purpose of the angular-redux/form and seems like extra work when I could just listen to the @@angular-redux/form/FORM_CHANGED and check the payload.path in order to determine what form is being acted upon. Additionally, it adds even more action spam in the store, when I feel like a simple debounce would create less, allow one to utilize the strengths of angular-redux/form [less work], and give the desired effect. [Do you have any better suggestions on how to handle this?]

It would make sense to offer a feature within angular-redux/form that allows specific inputs to be debounced instead of every keystroke instantly saving to the store (so the actual dispatch action is delayed).

actra-gschuster commented 6 years ago

A debounce of zero is already in the code, PR #48 makes use of it by adding @Input('debounce') to the form.

<form [connect]="['my', 'path']" debounce="500">

would debounce form entries by 500 milliseconds.