Как обновить состояние после любого обновления состояния из магазина в реакции?

Question

У меня есть кнопка для загрузки графика

<li className="pull-right"><a className=" btn btn-default" onClick={this._saveChartDashboard.bind(this)}>Load</a></li>

_saveChartDashboard(){
   let data = {
      dashboardId : this.props.params.dashboardId, 
      chartIds : this.state.selectedChartId,
      userName: "demo"
    }
    DataConnectionAction._addChartToDashboard(data, ()=>{
    DataConnectionAction._dashboardChart({dashboardId: 
    this.props.params.dashboardId});
  });

}

У меня есть функция обратного вызова на _addChartToDashboard.Первоначально я загрузил одну диаграмму на приборную панель, и снова я загрузил другую диаграмму на приборную панель, когда я загружаю вторую диаграмму снова, я получаю 3 диаграммы с дублированием первой диаграммы.

Вместо обратного вызова. Если я перезагружаю страницу, то она работает нормально, без перезагрузки страницы, с обратным вызовом, как обновить исходную загруженную диаграмму без дублирования.

В хранилище связей данных изменитья получаю данные из хранилища

if(type == 'SavedChartDatainDashboard'){
      let data = JSON.parse(JSON.stringify(DataConnectionStore._getData('savedChartinDashboard')));
      let saveLayoutchart = DataConnectionStore._getSaveLayout() || {};
      var layout = this.generateLayout(data.length, saveLayoutchart);
        this.setState({ 
          saveLayoutchart
       });

       this.setState({ 
        savedChartinDashboard: data,
         layout
        }, () => {
          if(data && data[data.length - 1].nextChartId)
            DataConnectionAction._dashboardChart({
              dashboardId: this.props.params.dashboardId,
              chartId: data[data.length - 1].nextChartId,
            });
      });

    }

onLayoutChange Я получаю сообщение об ошибке

onLayoutChange(layout, dashboardId) {
  let saveLayoutchart = DataConnectionStore._getSaveLayout() || {};
       this.setState({ 
          saveLayoutchart
       });
        var dashObj={};
        dashObj.dashboardId=this.props.params.dashboardId;

        var dashboardLayout={};
        var layoutChartId= saveLayoutchart.responseDto && saveLayoutchart.responseDto.chartIds;


        for(var i=0;i<layout.length;i++)
        {

         dashboardLayout[layoutChartId[i]] = layout[i];
        }
        dashObj.dashboardLayout=dashboardLayout;
        DataConnectionAction._saveLayoutToDashboard(dashObj);

   }

generateLayout функция

generateLayout(chartCount,layoutObj) {

    var layout = [], x, y, i;

    if(layoutObj.responseDto && layoutObj.responseDto.dashboardLayout!=null)
    {
     var keysArr=[];
     Object.keys(layoutObj.responseDto.dashboardLayout)
      .forEach(function eachKey(key) { 
      keysArr.push(key);
     });

    for (i = 0; i <= chartCount - 1; i++) {
      y = Math.ceil(Math.random() * 4) + 1;

      layout[i] = {x:layoutObj && layoutObj.responseDto && layoutObj.responseDto.dashboardLayout[keysArr[i]] && layoutObj.responseDto.dashboardLayout[keysArr[i]].x, y:layoutObj && layoutObj.responseDto && layoutObj.responseDto.dashboardLayout[keysArr[i]] && layoutObj.responseDto.dashboardLayout[keysArr[i]].y, w: layoutObj && layoutObj.responseDto && layoutObj.responseDto.dashboardLayout[keysArr[i]] && layoutObj.responseDto.dashboardLayout[keysArr[i]].w, h: layoutObj && layoutObj.responseDto && layoutObj.responseDto.dashboardLayout[keysArr[i]] && layoutObj.responseDto.dashboardLayout[keysArr[i]].h, minW: 2, maxW: 6, minH:10, maxH: 100, isResizable: true, isDraggable: true, i: i.toString()};
    }
  }
  else
  {
    for (i = 0; i <= chartCount - 1; i++) {
       y = Math.ceil(Math.random() * 4) + 1;

     layout[i] = {x: i * 2 % 12, y: Math.floor(i / 6) * y, w: 2, h: 13, minW: 2, maxW: 6, minH:10, maxH: 100, isResizable: true, isDraggable: true, i: i.toString()};
     }


  }
   return {lg:layout};

}