如何在React和Redux中使几个字段可编辑？

Question

I have an object in my redux state

const obj = {
 name: 'name',
 age: 2,
 place: 0,
}

I show these values on the page but I want to make two of them editable so that the object can be updated.

For that I'm basically getting values from two inputs and sending them to my action

export const saveEditedData = data => dispatch => {
  dispatch({
    type: CHANGE_DATA,
    data,
  });
 }

and then in reducer

 case 'CHANGE_DATA': 
      return {
        ...state,
        obj: {
         ...state.obj,
         name: action.data.name,
         age: action.data.age,
       }
    }

The problem that I'm facing is that if one value is updated and another is not then after this action my second value in empty.

My question is what is a good way to determine which field is changed and update only it?

So far I only came up with putting if else in action to dispatch certain thing. Maybe there is a better way?

Answer 1

You can 1. make each field update with individual actions, changeName , changeAge , etc, or 2. filter the action payload to get rid of the unwanted values before putting them in your obj :

 case 'CHANGE_DATA': 
      return {
        ...state,
        obj: {
         ...state.obj,
         ...action.data.filter(el => !!el)
       }
    }

(the !! notation is converting the array elements to booleans when filtering, not strictly necessary but sanitary)

EDIT: Sorry I misunderstood your data shape, see comments.