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方法。这是一个问题，因为我的视图可能包含数百个level1组件，但一次只能编辑一个。有没有办法设置一个只在与单个ID关联的商店元素发生变化时才会调用其订阅的选择器？

Answer 1

我想知道同样的事情。我认为问题是你想观察一个数组（Level2s）的过滤子集（特定Level1的子节点）而不观察整个数组。但是，根据我的理解，整个数组（所有Level2）都是ngrx用于观察的内容以及应用的memoization。

我想到了三种解决方案。

第一种方法是更改数据模型，以便给定级别的子级保存在自己的数组中。这实际上意味着在您的州中嵌套您的等级。如果你真的有一个树结构（孩子只有一个父）而不是图结构（孩子有多个父母）那么这可以工作。但是，保持状态是最好的做法（https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape）。

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

第三个选项是执行自己的memoization形式（def：在接收相同参数时返回最后一个结果）。使用createSelector的问题在于它只是查看数组的引用（例如Level2的列表）并看到它发生了变化。您需要更深层次的memoization，比较切片内部元素的引用，看看它们是否发生了变化。

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

以下是一些正在运行的示例：

我对您当前情况的理解： https://stackblitz.com/edit/ngrx-projections-v1
解决方案＃2（精细订阅）：https://stackblitz.com/edit/ngrx-projections-v3
解决方案＃3（自定义记忆...... ish）：https://stackblitz.com/edit/ngrx-projections-v2

打开控制台，看看发生了什么。它会打印状态更改以及对状态中每个组件的更改。

对于＃2，我完全被动，这增加了一点点臃肿。在实践中，我通常不这样做。相反，我会将模型从视图传递到需要它的函数。

对于＃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)
    )
};

Answer 2

只要遵循有角度的最佳实践（确保指定trackBy键），呈现整个UI的费用可能不会比您想象的要高。

如果您仍然对此感到担忧，则可以将ID从详细信息中分离出来，而仅使用ID呈现列表。

arr = [1,2,3,4.....]
<div *ngFor="let id of arr"><sub-component [itemId]="id"></subcomponent></div>

然后，在子组件内部，您可以使用商店通过提供的输入来选择每个组件的详细信息。

_itemId = null
@input()
set itemId(value) {
    if (value !== this._itemId) {
        this._itemId = value
        this.details = this.store.select(selectDetails(value))
    }
}

非规范化ngrx存储设置选择器？

2 个答案: