reactjs - Redux:集合中项目的派生数据

Question

这是我的状态树的简化版本:

{
    "radius": 8,
    "nodes": [
        { "id": 1, "x": 10, "y": 10 },
        { "id": 2, "x": 15, "y": 10 },
        { "id": 3, "x": 20, "y": 10 }
    ]
}

本质上，我有一个节点列表，每个节点都有一个 x 和 y。我还有一个半径数，用于计算哪些其他节点在某个节点的半径内，即近邻。

我需要我的状态如下所示:

{
    "radius": 8,
    "nodes": [
        { "id": 1, "x": 10, "y": 10, "neighbors": [2] },
        { "id": 2, "x": 15, "y": 10, "neighbors": [1, 3] },
        { "id": 3, "x": 20, "y": 10, "neighbors": [2] }
    ]
}

邻居的计算相当昂贵，所以我只想在其中一个节点位置发生变化时才计算它。

我为此研究了使用的选择器，但我不确定选择器是否有效。为了导出给定节点的邻居，我需要整个节点列表和半径。如果我将整个节点列表传递给选择器，则选择器将重新计算节点集合中的任何内容是否发生更改。我只需要重新计算任何节点的 x 或 y 值是否发生变化。请注意，除了 x 和 y 之外，这些节点还有很多其他键。

似乎为了让选择器工作，我需要为节点数组的每个元素一个新的选择器，这是动态的。这是正确的吗？

另一个障碍是我需要这个邻居列表来计算其他 reducer 中的其他状态。这是否意味着我应该在节点 reducer 中进行此计算？

有人对这个问题有任何见解吗？

*编辑

我最终将邻居移入状态而不是派生它们。我需要从 reducer 内访问邻居来执行某些其他操作，但我无法找到缓存/内存它们的方法。

这似乎有点脆弱，因为我本质上是在涉及邻居的某些操作上导出和存储邻居，而不是在其他不涉及邻居的操作上重新导出它们。 (这几乎就是内存选择器自动执行的操作......)但是，可惜，我找不到一个好的方法来做到这一点。

这是错误的吗？

*编辑2我最终将节点状态分为两部分:

nodes: {
    nodesById: {
        "1": { "id": 1, "color": "blue", ... },
        "2": { "id": 2, "color": "red", ... },
        ...
    },
    positionsById: {
        "1": { "id": 1, "x": 0, "y": 10 },
        "2": { "id": 2, "x": 10, "y": 10 },
        ...
    }
}

这样，我就可以编写一个选择器，仅使用节点的位置和半径来计算邻居:

export const getNeighborsById = createSelector(
    (positionsById, radius) => positionsById,
    (positionsById, radius) => radius,
    (positionsById, radius) => {
        // calculate neighbors
    }
);

此选择器仅在 positionsById 更改时重新运行，而不是在 nodesById 更改时重新运行(这种情况发生的次数更多)。

这解决了我的问题，但在同一个 reducer 中维护两个列表似乎有点错误，但也许不是......

Answer 1

对于 Redux 中的状态有几个常见的误解:

1. 状态必须使用原生 JS 类型进行描述。 错误
2. 状态代表屏幕上显示的内容。 部分错误

1。使用正确的数据结构

根据您的用例，将节点存储到数组中似乎不是最佳选择。是的，您可以这样做，但是每当添加、删除或修改节点时，您都​​需要遍历列表并更新邻居。如果将此过程移至选择器，则需要某种内存而不牺牲性能。

在我看来，您的节点应该存储在空间分区数据结构中(例如不可变的四叉树)。这种 DS 将使节点遍历速度更快，并且识别邻居应该不会太困难。

2。使用选择器导出您的状态

当您必须对状态执行复杂的选择，或者需要在使用状态之前将其导出为另一种形状时，选择器非常有用。

如果您的节点存储在 quardtree 中，则可以轻松编写一个选择器来查询其邻居并将它们作为数组返回。