在可观察的RXJS中管理内部状态

Question

我是RXJ的新手，想知道内部状态。

我们的用例是返回初始状态（具有IDS的项目列表）和可观察到将突变（已删除ID）的可观察到的承诺。然后，更新的项目列表是一个持久状态，应用于构建结果。

我可以使用一个全局变量将一些东西侵入，但正如预期的那样，它的行为很奇怪：

import { combineLatest, from } from "rxjs";
import { startWith } from "rxjs/operators";

...

const initialObservable = from(initialPromise);

const mutationObservableWithStart = mutationObservable.pipe(startWith(null));

const globalDeletedIds: string[] = [];

return combineLatest([initialObservable, mutationObservableWithStart]).pipe(
  map(([items, mutation]) => {
    if (mutation && mutation.deleted) {
      globalDeletedIds.push(mutation.id);
    }

    const currentItems = items.filter(doesNotIncludeIds(globalDeletedIds));

    return buildResult(currentItems);
  })
);

我的问题是：如何在可观察到的内部状态正确管理内部状态？

Answer 1

如果我理解问题是正确的，我会这样继续（Inline评论尝试解释逻辑），

// first we start the stream with the initial list of items (an array notified
// by the initialObservable)
initialObservable.pipe(
  // once initialObservable notifies the list we switch to another observable
  switchMap(items => {
    // the stream we switch to starts with the stream of mutations
    return mutationObservable.pipe(
      // we need to notify something since the very beginning, not only from
      // when the first mutation occurs, therefore we use startWith to say
      // that the new stream starts immediately notifying a null (assuming 
      // there is no null key in items)
      startWith(null),
      // since we need to keep a state but also to notify the state any time 
      // an event from upstream (i.e. a mutation) occurs, then we use the
      // scan operator which holds an internal state which is notified any time
      // upstream notifies something
      scan((state, m) => {
        // the state, i.e. the list of items, gets updated according to the
        //  mutations received from upstream
        state = state.filter(item => item.id !== m)
        // scan returns a new state
        return state
      }, items)  // the state is initialized with the items received
    )
  })
)

您可以看一下此stackblitz 示例。