在 switchMap 中操作时保持状态

Question

假设您有一个函数 returns 一个包含对象列表的 rxjs observable。

const getItems = () =>
  of([
    {
      id: 1,
      value: 10
    },
    {
      id: 2,
      value: 20
    },
    {
      id: 3,
      value: 30
    }
  ]);

和第二个函数，returns 一个具有单个对象的可观察对象

const getItem = id =>
  of({
    id,
    value: Math.floor(Math.random() * 30) + 1
  });

现在我们要创建一个将获取第一个列表并定期随机更新任何列表项的可观察对象。

const source = getItems().pipe(
  switchMap(items =>
    interval(5000).pipe(
      switchMap(x => {
        // pick up a random id
        const rId = Math.floor(Math.random() * 3) + 1;

        return getItem(rId).pipe(
          map(item =>
            items.reduce(
              (acc, cur) =>
                cur.id === item.id ? [...acc, item] : [...acc, cur],
              []
            )
          )
        );
      })
    )
  )
);

source.subscribe(x => console.log(JSON.stringify(x)));

上述代码的问题在于，每次触发间隔时，前一次迭代中的项目都会重置为其初始形式。例如，

[{"id":1,"value":10},{"id":2,"value":13},{"id":3,"value":30}]
[{"id":1,"value":10},{"id":2,"value":20},{"id":3,"value":18}]
[{"id":1,"value":10},{"id":2,"value":16},{"id":3,"value":30}]
[{"id":1,"value":21},{"id":2,"value":20},{"id":3,"value":30}]

如您所见，我们的代码在每个时间间隔内重置列表并更新一个新项目（例如，值 13 在第二次迭代中丢失并恢复为 20）。该行为似乎是合理的，因为第一个 switchMap 中的 items 参数就像一个闭包。

我设法通过使用 BehaviorSubject 以某种方式解决了这个问题，但我认为我的解决方案有点脏。

const items$ = new BehaviorSubject([]);

const source = getItems().pipe(
  tap(items => items$.next(items)),
  switchMap(() =>
    interval(5000).pipe(
      switchMap(() => {
        const rId = Math.floor(Math.random() * 3) + 1;

        return getItem(rId).pipe(
          map(item =>
            items$
              .getValue()
              .reduce(
                (acc, cur) =>
                  cur.id === item.id ? [...acc, item] : [...acc, cur],
                []
              )
          ),
          tap(items => items$.next(items)),
          switchMap(() => items$)
        );
      })
    )
  )
);

有没有更好的方法？

可以找到示例代码here

Answer 1

我相信这应该是您想要的：

const source = getItems().pipe(
  switchMap(items =>
    interval(1000).pipe(
      switchMap(() => {
        const rId = Math.floor(Math.random() * 3) + 1;
        return getItem(rId);
      }),
      scan((acc, item) => {
        acc[acc.findIndex(i => i.id === item.id)] = item;
        return acc;
      }, items),
    )
  )
);

这基本上就是您正在做的，但我正在使用 scan（使用原始 items 初始化）将输出数组保留在 acc 中，以便我可以更新稍后再说。

现场演示：https://stackblitz.com/edit/rxjs-kvygy1?file=index.ts

在 switchMap 中操作时保持状态

Keep state while operating in switchMap

rxjs

behaviorsubject

rxjs-pipeable-operators

switchmap