Обновление вложенного состояния редукции

Question

У меня есть редуктор, который получает действие с полезной нагрузкой, которую мне нужно обновить. Проблема в том, что данные, которые мне нужно обновить в состоянии, - это вложенные данные. Я добавил свой редуктор ниже с некоторым комментарием и тем, что я пытался сделать до сих пор.

export default function(state=data, action){ 
    switch (action.type) { 
    case 'UPDATE_CONTACT_INFO': 
     let appointment = state[action.appointmentIndex]; // This is the appointment that needs to be updated 
     appointment.notification.contactInfo = action.payload; // this is the data that needs to be updated with the payload. I tried updating it like this but then not sure how to add it to the state. 
     return state; // Somehow need to update the state with the new state 
     break; 
    default: 
    return state; 
    } 
} 

Ниже представлена ​​моя первоначальная структура данных, которую я передаю в редуктор в качестве состояния по умолчанию.

data = [ 
     { 
     date: 'Friday, January 6', 
     time: '4:00 PM-5:00 PM', 
     notification: 
      { 
      contactInfo: [ 
       { 
       displayMethod:"Phone Call", 
       method:"Phone", 
       value:"3473686552" 
       }, 
       { 
       displayMethod:"Email", 
       method:"Email", 
       value:"memedoe@gmail.com" 
       } 
      ] 
      } 
     }, 
     { 
     date: 'Saturday, January 7', 
     time: '2:00 PM-6:00 PM', 
     notification: 
      { 
      contactInfo: [ 
       { 
       displayMethod:"Phone Call", 
       method:"Phone", 
       value:"2123686552" 
       }, 
       { 
       displayMethod:"Email", 
       method:"Email", 
       value:"johndoe@gmail.com" 
       } 
      ] 
      } 
     } 
    ]; 

Действие. Загрузить в данных редуктора та же структура, что и массив contactInfo в одном из назначений. [Object, Object]

Answer 1

Все проблемы этого типа могут быть решены с помощью react-addons-update пакета. Прочтите here.

Этот случай может быть решена таким образом:

export default function(state=data, action){ 
    switch (action.type) { 
    case 'UPDATE_CONTACT_INFO': 
     return update(state, {[action.appointmentIndex]:{notification: {contactInfo: {$set: action.payload}}}}); 
    default: 
    return state; 
    } 
} 

Answer 2

С помощью redux вы никогда не обновляете состояние. Вам нужно будет вернуть новый объект состояния с обновленными данными.

Для того, чтобы сделать это, вам нужно использовать либо Object.assign() или ES6 распространения оператора {...}

Я при условии ссылки на оба: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Spread_operator

Читайте на редукторах здесь: http://redux.js.org/docs/basics/Reducers.html

Обратите особое внимание на Мы не мутировать состояние пункт.

Answer 3

Вы должны использовать object.assign, чтобы изменить данные в вашем магазине

const newstateobject = Object.assign({}, state[someIndex], {notification: Object.assign({}, state[someindex].notification, {contactInfo: action.payload})}); 

return Object.assign({}, state, {[someindex]: newstateobject);