NGRX Component Store带参数Selector未正常触发问题咨询

问题原因分析 #

1. 第一种方案无法运行的直接原因 #

你代码里的objectById$ = this.objectById;是直接把函数本身赋值给了变量，没有传入id调用函数生成Observable。如果直接订阅objectById$，本质是在订阅一个函数，自然不会进入你写的选择器逻辑。
就算你调用函数传入了id，还是收不到更新，这是因为你的单对象更新updater存在不可变更新错误。

2. 单对象更新updater的致命错误 #

你写的setSingleObjectValue存在两个问题：

• 直接修改了原state的objectMap属性，违反了NGRX要求的状态不可变原则
• 赋值运算的返回值是单个子对象，导致更新后state里的objectMap直接变成了单个对象，不再是原来的映射结构

// 错误写法
readonly setSingleObjectValue = this.updater((state: MainStore, data: ObjectModel) => {
    // 这里的返回值是新的单个对象，不是整个objectMap
    const objectMapWithNewValue = state.objectMap[data.id] = {...data}
    return {
        ...state,
        objectMap: objectMapWithNewValue 
    };
});

这个错误同时导致方案2必须更新整个objectMap引用才能触发的问题，因为你原本的更新逻辑根本没有正确修改映射结构。

正确实现方案 #

第一步：修正updater的不可变更新逻辑 #

readonly setSingleObjectValue = this.updater((state: MainStore, data: ObjectModel) => {
    // 先复制整个objectMap生成新引用
    const newObjectMap = {
        ...state.objectMap,
        // 覆盖对应id的对象
        [data.id]: {...data}
    };
    return {
        ...state,
        objectMap: newObjectMap
    };
});

第二步：实现参数化的单对象选择器 #

你可以直接用第一种方案的逻辑，调用时传入对应id即可，Component Store的select会自动做值对比，只有对应id的对象变化时才会触发订阅：

objectById(id: string): Observable<ObjectModel> {
    return this.select(state => state.objectMap[id])
}

// 使用时传入id订阅
const id1Object$ = this.store.objectById('id1');
id1Object$.subscribe(obj => console.log('id1对象更新：', obj));

如果需要避免重复创建相同id的Observable，也可以加一层缓存：

private objectByIdCache = new Map<string, Observable<ObjectModel>>();
objectById(id: string): Observable<ObjectModel> {
    if (!this.objectByIdCache.has(id)) {
        const obs$ = this.select(state => state.objectMap[id]).pipe(
            shareReplay(1)
        );
        this.objectByIdCache.set(id, obs$);
    }
    return this.objectByIdCache.get(id)!;
}

内容的提问来源于stack exchange，提问作者Milos