Angular

Question

我正在用 Angular 9.

编写一个应用程序

我决定使用带有 BehaviorSubject 的 rxjs 存储来进行简单的状态管理。

这就是我的代码试图做的事情：我有一些用户配置文件，这些用户配置文件具有用户登录时获得的权限。我想将它存储在本地存储中，以便在他们关闭应用程序时它会持续存在。我想加载数据并能够更改当前选择的配置文件。我希望这些数据在我的应用程序的各个地方都可用。

这是我的代码示例：https://stackblitz.com/edit/rxjs-state-management-get-set

请按演示应用程序上的 'add profile' 按钮

商店代码片段：

export class PersonaService {

    private readonly data: BehaviorSubject<IPersonaData>;
    public readonly sharedData: Observable<IPersonaData>;

    constructor() {
        this.data = new BehaviorSubject<IPersonaData>(null);
        this.sharedData = this.data.asObservable() as Observable<IPersonaData>;
    }

我的代码中有一个函数：

public setSelectedPersonaIndex(newIndex: number): void {

    const temmpData: IPersonaData = this.data.getValue();

    temmpData.currentPersonaIndex = newIndex;

    this.data.next(temmpData);

    localStorage.setItem(Constants.KEYS.defaultPersonaIndex, newIndex.toString());
}

我想做的是只更新我的 BehaviorSubject 商店中的一个字段。例如。我存储的数据如下所示：

const example: IPersonaData = {
    currentPersonaIndex: null,
    personas: []
};

我只想更新我的 BehaviorSubject 存储中的 currentPersonaIndex 而不是其他值，然后保存新结果。

有人向我提到调用 getValue 可能是不正确的方法，因为它会影响订阅者。是真的吗？

如何在不调用 getValue 的情况下更新值？

Answer 1

如果你想更新我建议你传播然后下一个;

const tempData: IPersonaData = {...this.data.getValue(), currentPersonaIndex: newIndex};

this.data.next(tempData);

如果您在 this.data 致电 next()，所有订阅者都会收到通知。如果你想优化这个，请在每个订阅者上使用 rxjs distinctUntilChanged / distinctUntilKeyChanged。

我给你的提示：

如果你想要一个轻量级的状态管理，看看rx-angular-state
在 youtube 上观看 Michael Hladkys（图书馆作者）的演讲。

Angular - 如何在不调用 getValue 的情况下更新函数中 BehaviorSubject 存储值中的字段

Angular - how can I update a field in my BehaviorSubject store value in a function without calling getValue

subscribe

behaviorsubject