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?

Krasimir · Accepted Answer · 2018-01-02 17:04:08Z

9

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 }};

answered Jan 2, 2018 at 17:04

Krasimir

13.6k4 gold badges45 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Max · Accepted Answer · 2018-01-02 17:14:24Z

1

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,
  };

answered Jan 2, 2018 at 17:14

Max

1,58710 silver badges17 bronze badges