Javascript 使用reducer递归更新Redux存储

我一直在研究一个延迟加载递归树视图，虽然我有组件级的东西在工作，但我在尝试如何使它与redux配合使用时遇到了一些困难。 为了简单起见，假设我在redux中有以下数据结构

[
    {
        id: 'myId1',
        value: 'Tree View top level 1',
        fetchedChildren: []
    },
    {
        id: 'myId2',
        value: 'Tree View top level 2',
        fetchedChildren: []
    },

    …and so on

]

我让我的递归组件工作，这样当你点击一个项目时，相关的id被发送到API，并返回一个子集合。单击myId2将导致数据如下所示

[
    {
        id: 'myId1',
        value: 'Tree View top level 1',
        fetchedChildren: []
    },
    {
        id: 'myId2',
        value: 'Tree View top level 2',
        fetchedChildren: [
            {
                id: 'myId3',
                value: 'Tree View second level 1',
                fetchedChildren: []
            },
            {
                id: 'myId3',
                value: 'Tree View second level 2',
                fetchedChildren: []
            },
        ]
    },
]

然后这个想法是理论上可以无限延伸

下面是我的reducer的一个示例，它将存储从上面的第一个示例正确更新为第二个示例（树链接到数据）

case FETCH\u CHILDREN\u成功：
返回{
……国家，
加载：false，
错误：null，
数据：state.data.map（leaf=>leaf.id==action.payload.id{
…叶子，
value:leaf.value，
fetchedChildren:action.payload.fetchedChildren.map（child=>{
返回{
小孩
值：child.value
}
})
}：叶）
};

这将在第二个级别上填充fetchedChildren，但是如何在后续级别上递归地执行此操作？ 我查看了redux源代码中的树视图示例，他们管理数据的方式是使用一个平面数组，该数组由ID链接以标识父级。 上面的方法是错误的吗？我是否应该像redux示例那样在平面阵列中这样做