react redux updating state on input change

Question

I'm making a page using react redux which has 14 input tags.

I have 14 different names in state for each of the input tag.

What do I do to update the state whenever any of the input changes?

Do I need to write actions and reducers for every input tag?

Answer 1

For sure you have to refactor your app to have a single action like:

{ type: 'UPDATE', field: '<name of your field>', value: <value here> }

And then in your reducer:

case 'UDPATE':
  const { field, value } = action.payload;

  return { ...state, { [field]: value }};

Answer 2

If you are updating properties in one reducer you can do something like this:

Dispatch the updated value in an object and then merge it with the previous state in the reducer.

dispatch({
  type: 'UPDATE_FIELD',
  data: { banana: 'yellow' },
});

In your reducer:

case 'UPDATE_FIELD':
  return {
    ...state,
    ...data,
  };