React-redux-form: Question re removing / filtering fields

[ndevvy]

My app uses redux-form to handle the state of multiple forms at once in a dashboard; each form has its name passed in at render time. We also dynamically add and remove fields. It's a fairly complex setup.

Desired behavior

I would like to implement behavior such that when fields with certain characteristics are added to the form, it automatically 1) adds additional fields with pre-filled values to the form, and 2) removes other fields, matching certain conditions, if those are present. Contrived example: when a field animal_type: dog is added, we remove any cat-related fields currently in the form and add some dog-specific fields.

Approaches considered

We've considered a few. One involves using reducer.plugin() to plug in a reducer that will perform all these additional state changes when needed. The apparent blocker here is that we seemingly need to know the name of the form prior to runtime in order to use plugin(), and as mentioned above, we generate the form names on render.

Another approach would be to use a custom action for adding field values which would also dispatch the appropriate arrayPush and arrayRemove actions when the conditions are met. The blocker here is that arrayRemove requires the index of the fields we wish to remove. We can find the fields we want to remove in the form state, but when removing more than one field, the indexes will change. We can start with the latest index number and work back, but this feels hacky. It seems like what we want here is something like arrayFilter.

Is there a recommended way of accomplishing this? Anyone doing something similar? Happy to provide more details!

[ndevvy]

This was meant for redux-form.

[davidkpiano]

Just for comparison sake:

1) adds additional fields with pre-filled values to the form

// in an onClick handler, or wherever else:
dispatch(actions.change('animals', animals => [
  ...animals,
  { animal_type: 'dog', name: 'New doggo 1' },
  { animal_type: 'dog', name: 'New doggo 2' },
  { animal_type: 'dog', name: 'New pupper 3' }
]));

2) removes other fields, matching certain conditions, if those are present.

// in an onClick handler, or wherever else:
dispatch(actions.filter('animals', ({ animal_type }) => animal_type !== 'cat'));

And this works 100% as you would expect with dynamic fields 🐶

[ndevvy]

Hey, thanks for the comp! 😺 react-redux-form was actually my initial choice for what we're doing, but I went with redux-form for various reasons. Could be worth revisiting.