angular - 非规范化 ngrx store- 设置选择器？

Question

我目前在 ngrx 项目中处理一个有点复杂(深层)的结构。它可以被认为是一个父对象数组，具有多个级别的子对象。它在服务器端被规范化/扁平化，我商店中的功能看起来像这样:

rootObjs: {
    level1: {
        byId: {
            'lvl1_1': {id: 'lvl1_1', label: '[Lvl 1]: 1', ui_open: true, children: ['lvl2_1', 'lvl2_3']},
            'lvl1_2': {id: 'lvl1_2', label: '[Lvl 1]: 2', ui_open: false, children: ['lvl2_2']}
        },
        allIds: [
            'lvl1_1', 'lvl1_2'
        ]
    },
    level2: {
        byId: {
            'lvl2_1': {id: 'lvl2_1', label: '[Lvl 2]: 1', ui_open: false, children: ['lvl3_1', 'lvl3_2']},
            'lvl2_2': {id: 'lvl2_1', label: '[Lvl 2]: 2', ui_open: true, children: ['lvl3_3']},
            'lvl2_3': {id: 'lvl2_1', label: '[Lvl 2]: 3', ui_open: false, children: []}
        },
        allIds: [
            'lvl2_1', 'lvl2_2', 'lvl2_3'
        ]
    },
    level3: {
        byId: {
            'lvl3_1': {id: 'lvl3_1', label: '[Lvl 3]: 1', ui_open: false,},
            'lvl3_2': {id: 'lvl3_2', label: '[Lvl 3]: 2', ui_open: false,},
            'lvl3_3': {id: 'lvl3_3', label: '[Lvl 3]: 3', ui_open: false,},
        }
        allIds: [
            'lvl3_1', 'lvl3_2', 'lvl3_3'
        ]
    }
}

现在我正在尝试编写我的选择器。我的问题是所有对象都需要同时显示在屏幕上，但是它们必须都可以单独编辑。因此，我正在尝试创建一个允许我单独选择每个组件的选择器 - 类似于:

export const rootObjFeature = createFeatureSelector<RootObj>('rootObjs');
export const selectLevel1 = (id: string) => createSelector(
    rootObjFeature, (state: JobPlanner) => {
        // Grab only the level2 children associated with selected level1
        const lvl2 = state.level1.byId[id].children.map(key => state.level2.byId[key]);

        // Grab only the level3 children of level2 associated with selected level1
        const lvl3 = [].concat(
            ...state.lvl2.map( l2 => l2.children.map(key => state.level3.byId[key]));
        );
        return {
            ...state.level1.byId[id],
            level2: lvl2,
            level3: lvl3
        };
    }
);

然后在我的 Level1Component init 中，我做这样的事情:

export class Level1Component implements OnInit, OnDestroy {
    @Input() id: string;
    lvl1Sub: Subscription;
    lvl1: Level1Model;

    constructor(private store: Store<AppState>) { }
    ngOnInit() {
        this.lvl1Sub = this.store.select(selectLevel1(this.id)).subscribe(l1 => {
            console.log('loading level 1: '+this.id);
            this.lvl1 = l1;
        });
    }

    ngOnDestroy() {
        this.lvl1Sub.unsubscribe();
    }
}

通过此设置，我可以将适当的 level2 和 level3 对象传递给它们自己的组件(这些子组件可以在其中打开、关闭、编辑等) .但是，由于我的选择器的方式，任何时候编辑任何 level1、level2 或 level3 项目(例如- ui_open 为 lvl1_1 切换)，调用每个 level1 组件的 lvl1Sub 方法。这是一个问题，因为我的 View 可能有数百个 level1 组件，但一次只能编辑一个。有没有一种方法可以设置一个选择器，使其仅在与单个 ID 关联的那些商店元素发生更改时才调用其订阅？

Answer 1

我也想过同样的事情。我认为问题在于您想要观察数组 (Level2s) 的过滤子集(特定 Level1 的子集)而不观察整个数组。然而，在我的理解中，整个数组(所有 Level2s)是 ngrx 公开用于观察的内容以及应用内存的内容。

我想到了三种解决方案。

首先是更改您的数据模型，以便给定级别的子项保存在它们自己的数组中。这实质上意味着将您的级别嵌套在您的状态中。如果你真的有一个树结构( child 只有一个 parent )而不是一个图形结构( child 有多个 parent )那么这可能有效。然而，保持你的状态平坦是最好的做法(https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape)。

第二种解决方案是在更精细的级别订阅。您可以将每个实体的 id 传递给其下方的组件，而不是创建其下具有嵌套对象的顶级对象，该组件将订阅其自己的状态片段。然后只有与该状态切片相关联的组件及其祖先才会收到通知。

第三种选择是做你自己的内存形式(默认:当接收到相同的参数时返回最后的结果)。使用 createSelector 的问题在于它只是查看数组的引用(例如 Level2 列表)并发现它发生了变化。您需要一种更深入的内存形式，比较您关心的切片内元素的引用，看看它们是否发生了变化。

穷人的版本是在投影结束时具体化模型之前设置您自己的独特过滤器。基本要点是，您将子项列表过滤为您想要的内容，应用成对运算符以便您可以知道上次获得的内容，然后过滤流以忽略当前对象内部对象引用的值和之前的 emit 是一样的。

下面是一些运行示例:

• 我对您当前情况的理解: https://stackblitz.com/edit/ngrx-projections-v1
• 解决方案 #2(精细订阅):https://stackblitz.com/edit/ngrx-projections-v3
• 解决方案 #3(自定义内存...大概):https://stackblitz.com/edit/ngrx-projections-v2

打开控制台看看发生了什么。它打印状态变化以及从状态到每个组件的变化。

对于#2，我完全 react 了，这增加了一点膨胀。在实践中，我通常不这样做。相反，我会将模型从 View 传递到需要它的函数中。

对于#3，我编写了一个名为distinctElements() 的自定义运算符，它类似于distinctUntilChanged() 运算符，但它比较的是数组中元素的引用，而不是数组本身。这是它的代码。

import { Observable } from 'rxjs/Observable';
import { startWith, pairwise, filter, map } from 'rxjs/operators';

export const distinctElements = () => <T>(source: Observable<T[]>) => {
    return source.pipe(
        startWith(<T[]>null),
        pairwise(),
        filter(([a, b]) => a == null || a.length !== b.length || a.some(x => !b.includes(x))),
        map(([a, b]) => b)
    )
};