Question

我一直在处理一些延迟加载的递归树状视图，虽然我在处理组件级的东西，但是在尝试如何使其在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_CHILDREN_SUCCESS:
    return {
        ...state,
        loading: false,
        error: null,
        data: state.data.map(leaf=> leaf.id === action.payload.id ? {
        ...leaf,
        value: leaf.value, 
        fetchedChildren: action.payload.fetchedChildren.map( child => {
            return {
            ...child,
            value: child.value
            }
        })
        } : leaf)
    };

这将在第二级中填充fetchedChildren，但是您如何在后续级中递归执行此操作？我查看了redux源代码中的树状视图示例，他们管理数据的方式是拥有一个由id链接以标识父级的平面数组。上面的内容是错误的查看方式，我应该像redux示例那样在扁平数组中查看吗？

用reduce递归更新Redux商店

0 个答案: