2

我正在创建一个Line chartin 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: []
            }
        ]
    }
}]

在这家商店中，我试图将数据附加到labelanddata标签。但我不知道如何，我正在尝试如下但它不起作用

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;

任何帮助表示赞赏

4

1 回答 1

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"}]}
            }
         }
      }
    }
 })
//...

我做了一个例子（有使用 deprecated ，react-addons-update但它们具有相同的行为）。

注意：您lagData是数组。它不应该是一个对象，因为它是一个状态吗？在上面的例子中，我假设它应该是和对象，但如果由于某些原因你仍然需要处理一个数组 - 这里是fiddle。

PS：更好的是，将您的状态保持为不可变对象，例如在此工具的帮助下。我建议向它倾斜！

于 2016-10-28T06:33:18.510 回答