如何在深度嵌套的对象中删除状态？

Question

我正在使用Redux应用程序在ReactJS上工作。我对我的状态进行了更改，这导致了额外的属性层。所以原始的状态结构是：

filters: {
    filterGroupId-1 : {
        id: filterGroupId-1
        selectedFilters: []
    }
    filterGroupId-2 : {
        id: filterGroupId-1
        selectedFilters: []
    }
    filterGroupId-3 : {
        id: filterGroupId-1
        selectedFilters: []
    }
}

现在，它已更改为：

filters: {
    dataSource-1: {
        filterGroupId-1 : {
            id: filterGroupId-1
            selectedFilters: []
        }
        filterGroupId-2 : {
            id: filterGroupId-1
            selectedFilters: []
        }
        filterGroupId-3 : {
            id: filterGroupId-1
            selectedFilters: []
        }
    }

    dataSource-2 {
        ...
    }
}

要删除过滤器组，我最初在filters reducer中有以下代码：

case FILTER_GROUP_DELETED:
    const { [action.data.filterGroupId]: deletedValue, ...newState } = state;

    return newState

我需要对上面的代码片段进行哪些更改，以说明引入到状态结构中的额外层？(筛选器组对象现在位于数据源属性下)

感谢任何帮助

Answer 1

你可以从你的状态中提取你的对象，然后应用完全相同的方法来删除你的元素，然后你将从你的开关中返回一个JSON对象，并直接对它使用setState：

case FILTER_GROUP_DELETED:
    const { ['dataSource-1']: dataSource } = state;
    const { [action.data.filterGroupId]: deletedValue, ...newSource } = dataSource;

    return { 'dataSource-1':  newSource }