Добавить данные в вложенный магазин redux

Question

Я работаю над созданием Line chart в react-chartjs, для этого я получаю данные из API через регулярный промежуток времени и с успехом. Я отправляю действие, которое обновляет reducer-state. У меня есть исходные данные в моем Redux магазине, как

var lagData = [{ 
    options: { 
     responsive: true, 
     legend: { 
      position: 'top' 
     }, 
     title: { 
      display: true, 
      text: 'ETL lag in minutes' 
     }, 
     scales: { 
      xAxes: [{ 
       type: 'linear', 
       position: 'bottom' 
      }], 
      yAxes: [{ 
       stacked: true 
      }] 
     } 
    }, 
    data: { 
     labels: [], 
     datasets: [ 
      { 
       label: 'Current lag', 
       fill: false, 
       lineTension: 0.1, 
       backgroundColor: "rgba(75,192,192,0.4)", 
       borderColor: "rgba(75,192,192,1)", 
       borderCapStyle: 'butt', 
       borderDash: [], 
       borderDashOffset: 0.0, 
       borderJoinStyle: 'miter', 
       pointBorderColor: "rgba(75,192,192,1)", 
       pointBackgroundColor: "#fff", 
       pointBorderWidth: 1, 
       pointHoverRadius: 5, 
       pointHoverBackgroundColor: "rgba(75,192,192,1)", 
       pointHoverBorderColor: "rgba(220,220,220,1)", 
       pointHoverBorderWidth: 2, 
       pointRadius: 1, 
       pointHitRadius: 10, 
       spanGaps: false, 
       data: [] 
      } 
     ] 
    } 
}] 

В этом магазине я пытаюсь добавить данные к label и data тегам. Но я не могу понять, как я пытаюсь это следующим образом, но это не работает

const lagInfo = (state = lagData, action) => { 
    switch(action.type) { 
     case 'GET_CURRENT_LAG_RECEIVED': 
      console.log(action.data); 
      return Object.assign({}, state, { 
        data: Object.assign({}, state.data.datasets.data, { 
         x: "afsa", 
         y: "fa" 
        }) 
       }); 
      break; 
     case 'GET_CURRENT_LAG_ERROR': 
      console.log(action.err); 
      return action.err; 
      break; 
     default: 
      return state; 

    } 
} 

export default lagInfo; 

любая помощь

Answer 1

Вы можете использовать immutability-helper для обновления состояния в непреложного пути. Код должен выглядеть следующим образом:

import update from 'immutability-helper'; //import helper 
// .... 
case 'GET_CURRENT_LAG_RECEIVED': 
    return update(state, { 
    0: { 
     data: { 
     datasets: { 
      0: { 
       data: {$push: [{ x: "afsa", y: "fa"}]} 
      } 
     } 
     } 
    } 
}) 
//... 

Я сделал fiddle с примером (там используется осуждается react-addons-update, но они имеют такое же поведение).

ПРИМЕЧАНИЕ: Ваш lagData представляет собой массив. Разве это не предмет, поскольку это состояние? В приведенном выше примере я предположил, что он должен быть и объектом, но если по каким-то причинам вам все равно придется иметь дело с массивом, вот fiddle.

PS: Еще лучше, чтобы ваше состояние было неизменным, например, с помощью this tool. Я бы предложил к нему подойти!