Объект обновления состояния ручек

Question

Я использую redux для состояния моего приложения, но мне сложно обновить состояние правильно, когда оно вложено.

Как вы можете видеть, я использую состояние ... в моем редукторе, но есть ли способ использовать это, когда мне нужно только обновить ключ дочернего объекта и сохранить остальную часть состояния? См ниже, например

// initial state 
state = { 
    isFetching: true, 
    isUpdating: false, 
    content: { 
     key: 'content', 
     otherkey: 'content' // Keep this one 
    } 
} 

// returned new state 
{ 
    ...state, 
    content: { 
     key: 'thing I only want to update' 
    } 
} 

Действия

export function requestUser() { 
    return { 
     type: REQUEST_USER 
    }; 
} 

export function receiveUser(data) { 
    return { 
     type: RECEIVE_USER, 
     payload: data 
    }; 
} 

export function fetchUser(userhash) { 
    return function (dispatch) { 
     dispatch(requestUser); 

     return new Promise(resolve => setTimeout(resolve, 500)).then(() => { 
      const data = { 
       status: 200, 
       data: { 
        firstName: 'Neal', 
        lastName: 'Van der Valk', 
        email: 'email@outlook.com', 
        hash: 'zea7744e47747851', 
        permissions: { 
         'admin': true, 
         'results': true, 
         'database': true, 
         'download': true, 
         'property': true, 
         'departments': true, 
         'users': true, 
         'devices': true,  
         'integrations': true, 
        }, 
        notifications: { 
         'daily': true, 
         'weekly': false 
        } 
       } 
      }; 

      dispatch(receiveUser(data)); 
     }); 
    }; 
} 

Reducer

const INITIAL_STATE = { 
    isFetching: true, 
    isUpdating: false, 
    content: null 
}; 

export default function(state = INITIAL_STATE, action) { 
    switch (action.type) { 
    case REQUEST_USER: 
     return { 
      ...state, 
      isFetching: true 
     }; 

    case RECEIVE_USER: 
     return { 
      ...state, 
      isFetching: false, 
      content: action.payload.data 
     }; 

Answer 1

Вы можете попробовать Object.assign()

Этот пример показывает использование.

{ 
    ...state, 
    content: Object.assign({}, state.content, { 
     key: 'thing I only want to update' 
    } 
} 

Вы также можете использовать один и тот же оператор Spread ...

var state = { 
 
     isFetching: true, 
 
     isUpdating: false, 
 
     content: { 
 
      key: 'content', 
 
      otherkey: 'content' // Keep this one 
 
     } 
 
    }; 
 

 
    var newState = { 
 
     ...state, 
 
     content: { 
 
     ...state.content, 
 
     key: 'thing I only want to update' 
 
     } 
 
    } 
 
    console.log(newState);

Answer 2

В вашем исходном состоянии, содержание должно быть {} вместо нуля. Тогда вы можете изменить состояние в своем редукторе с помощью Object.assign.

пример:

case RECEIVE_USER: 
    return{ 
    ...state, 
    content: Object.assign({}, state.content, { 
     key: 'thing I only want to update' 
    }