Выполнение глубокого копирования с использованием оператора распространения - невозможно скопировать последний уровень состояния

Question

У меня есть приложение, у которого есть список, который при нажатии на элемент заполняет другой список данными, которые находятся в подкатегории выбранного элемента списка.При щелчке элемента списка в родительском списке выполняется вызов API, который извлекает данные для заполнения дочернего списка.Несколько элементов приводят к нескольким вызовам API.

Когда щелкают несколько элементов в родительском списке, мне нужно добавить несколько дочерних элементов от каждого соответствующего родителя в список дочерних элементов.Я пытаюсь ограничить число зависимостей в своем приложении, и поэтому я использую как можно больше ES6 +.

Я использую оператор распространения, чтобы сделать несколько мелких копий моего вложенного состояния.Срез состояния, с которым я борюсь, выглядит следующим образом:

{
  tables: {
    tablesLoading: false,
    error: null,
    selectedTables: [],
    tables: {
      byId: {
        '9311fe20-dea9-11e9-ba2f-4fe2a4bdbda0': {
          id: '9311fe20-dea9-11e9-ba2f-4fe2a4bdbda0',
          value: 'Sample_1a',
          fields: []
        },
        '9311fe21-dea9-11e9-ba2f-4fe2a4bdbda0': {
          id: '9311fe21-dea9-11e9-ba2f-4fe2a4bdbda0',
          value: 'Sample_1b',
          fields: []
        },
        '93ea35b0-dea9-11e9-ba2f-4fe2a4bdbda0': {
          id: '93ea35b0-dea9-11e9-ba2f-4fe2a4bdbda0',
          value: 'Sample_2a',
          fields: []
        }
      },
      allIds: [
        '9311fe20-dea9-11e9-ba2f-4fe2a4bdbda0',
        '9311fe21-dea9-11e9-ba2f-4fe2a4bdbda0',
        '93ea35b0-dea9-11e9-ba2f-4fe2a4bdbda0'
      ]
    }
  }
}

Первоначальный вызов API извлекает данные, соответствующие первым двум идентификаторам ('9311fe20-dea9-11e9-ba2f-4fe2a4bdbda0' и '9311fe21-dea9-11e9-ba2f-4fe2a4bdbda0 ') с сервера.Затем я щелкаю другой элемент в родительском списке и хочу добавить третий элемент в объект tables.byId, а затем добавить соответствующий идентификатор в массив tables.allIds.Мой код для этого:

const tableRequestSuccess = (state, action) => {
    const tableVals = action.tableVals;
    const datasetName = action.datasetName;  
    const tableUUIDs = tableVals[datasetName].map(val=>(uuidv1())); 
    let addedtablesById = {};
    for (let i = 0; i<tableUUIDs.length; i++){ 
        let tableId = tableUUIDs[i];
        addedtablesById[tableId]={
            id: tableId,
            value: tableVals[datasetName][i],
            fields: []
        }
    }
    **const updatedTablesById =  updateObject(state.tables.byId, addedtablesById)**
    const updatetableAllIds = [...state.tables.allIds, ...tableUUIDs]

    const updatedProperties = {
        byId: updatedTablesById,
        allIds: updatetableAllIds
    };
    return updateObject(state, {
        tablesLoading: false,
        error: null,
        tables: updateObject(state.tables, updatedProperties)
    });
}

Моя проблема в том, что я не уверен, как сделать копию в той части моего дерева состояний, где хранятся отдельные объекты, т.е. state.tables.byId.THE_RESPECTIVE_IDS,Это оставляет меня с большинством внутренних объектов, имеющих ссылку на исходные объекты, и, следовательно, состояние не будет неизменным.Но поскольку идентификаторы будут различаться, а число постоянно будет меняться, я не уверен, как копировать эти последние объекты.Я подозреваю, что все состояния до этого момента были клонированы.

Я создал вспомогательную функцию для удобства чтения:

export const updateObject = (oldObject, updatedProperties) => {
    return {
        ...oldObject,
        ...updatedProperties
    }
}

Любые указатели на то, как это сделать, используя оператор распространения