2

私はLine chartinreact-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;

どんな助けでも大歓迎です

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 に答える