Looping api Anrufe in redux-Thunk (Reagieren redux Anwendung)

Question

Ich habe ein JSON-Objekt ähnlich wie dies in dem Redux Speicher meiner Anwendung:

tables: [ 
{ 
    "id":"TableGroup1", 
    "objs":[ 
    {"tableName":"Table1","fetchURL":"www.mybackend.[....]/get/table1"}, 
    {"tableName":"Table2","fetchURL":"www.mybackend.[....]/get/table2"}, 
    {"tableName":"Table3","fetchURL":"www.mybackend.[....]/get/table3"} 
    ] 
},{ 
    "id":"TableGroup2", 
    "objs":[ 
    {"tableName":"Table4","fetchURL":"www.mybackend.[....]/get/table4"}, 
    {"tableName":"Table5","fetchURL":"www.mybackend.[....]/get/table5"}, 
    {"tableName":"Table6","fetchURL":"www.mybackend.[....]/get/table6"} 
    ] 
} 
]; 

es zu laden, benutze ich den folgenden Aufruf (TableApi ist ein lokal geladenes Pseudo-API, beginAjaxCalls verfolgt, wie viele Ajax-Aufrufe derzeit aktiv sind);

export function loadTables(){ 
    return function(dispatch,getState){ 
    dispatch(beginAjaxCall()); 
    return TableApi.getAllTables().then(tables => { 
     dispatch(loadTablesSuccess(tables)); 
    }).then(()=>{ 

     //Looping through the store to execute sub requests 

    }).catch(error => { 
     throw(error); 
    }); 
    }; 
} 

Ich möchte dann eine Schleife durch meine Tabellen, rufen Sie die verschiedenen URLs und ein neues Feld namens Daten füllen, so dass ein Objekt nach einem Aufruf sieht wie folgt aus;

{"tableName":"Table1","fetchURL":"www.mybackend.[....]/get/table1","data":[{key:"...",value:"..."},{key:"...",value:"..."},{key:"...",value:"..."},.....]} 

Die Daten aktualisiert werden, werden häufig durch die URL holen erinnern, und die Tabelle sollte dann in der Ansicht neu rendern.

Was mich zu meinen Fragen führt: - Ist das architektonisch gesund? - Wie würde Redux häufige Änderungen behandeln? (wegen der Unveränderlichkeit, bekomme ich Leistungsprobleme durch häufiges tiefes Kopieren einer Tabelleninstanz mit 10.000+ Dateneinträgen)

Und noch wichtiger, welchen Code könnte ich platzieren, um den Kommentar zu ersetzen, so dass er seinen beabsichtigten Zweck erfüllt? Ich habe es versucht;

let i; 
for(i in getState().tables){ 
    let d; 
    for(d in getState().tables[i].objs){ 
    dispatch(loadDataForTable(d,i)); 
    } 
} 

Dieser Code scheint jedoch nicht die beste Implementierung und ich bekomme Fehler.

Alle Vorschläge sind willkommen, danke!

Answer 1

Zuerst müssen Sie keine tiefe Kopie von alle Tabellen erstellen. Aus Gründen der Unveränderbarkeit müssen Sie nur geänderte Elemente kopieren. Für Ihre Datenstruktur würde es wie folgt aussehen:

function updateTables(tables, table) { 
    return tables.map(tableGroup => { 
    if(tableGroup.objs.find(obj => table.tableName === obj.tableName)) { 
     // if the table is here, copy group 
     retrun updateTableGroup(tableGroup, table); 
    } else { 
     // otherwise leave it unchanged 
     return tableGroup; 
    } 
    }) 
} 

function updateTableGroup(tableGroup, table) { 
    return { 
    ...tableGroup, 
    objs: tableGroup.objs.map(obj => { 
     return table.tableName === obj.tableName ? table : obj; 
    }) 
    }; 
}