Question

我在我的应用程序的redux存储中有一个与此类似的JSON对象：

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"}
  ]
 }
];

要加载它，我使用以下调用（TableApi是本地加载的模拟api，beginAjaxCalls跟踪当前有多少Ajax调用活动）;

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);
    });
  };
}

然后我想遍历我的表，调用不同的URL并填充一个名为data的新字段，以便调用后的对象看起来像这样;

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

通过调用fetch url来频繁更新数据，然后表格应在视图中重新渲染。

这引出了我的问题： - 这在建筑上是否合理？ - redux如何处理频繁更改？（由于不变性，我会经常深度复制一个包含10,000多个数据条目的表格实例来解决性能问题）

更重要的是，我可以用什么代码替换评论，以使其符合预期目的？我试过了;

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

然而，这段代码似乎不是最佳实现，而且我收到了错误。

欢迎任何建议，谢谢！

Answer 1

首先，您不需要制作所有表的深层副本。为了不变性，您只需要复制更改的项目。对于您的数据结构，它看起来像这样：

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;
    }) 
  };
}

循环api调用redux-thunk（React redux应用程序）

1 个答案: