RXJS按ID拆分并按顺序处理每个ID

Question

问题：游戏：所以我有一些飞船可以到达许多星球。如果两艘船同时到达新星球，可能导致两次所有权变更的相同过程。此过程是异步的，每个行星所有权更改仅应发生一次。

要解决此问题，我想按行星ID划分飞船流，以便每个流仅用于一个行星。现在最棘手的部分是，每艘船只应在前一艘船经过处理后才能处理。

• 运费$
• 按星球ID划分
  • 行星ID1：按顺序进行处理
  • 行星ID2：按顺序进行处理
  • ...

这里有一些代码将显示其行为。

const ships = [
  {
    id: 1,
    planetId: 1,
  },
  {
    id: 2,
    planetId: 1,
  },
  {
    id: 3,
    planetId: 2,
  },
  // ... never finishes 
]
// the source observable never finishes 
const source$ = interval(1000).pipe(
  take(ships.length),
  map(i => ships[i]),
)

const createSubject = (ship) => {
  // Doesn't need to be a subject, but needs to emit new items after a bit of time based on some other requests.
  console.log(`>>>`, ship.id);
  const subject = new Subject();
  setTimeout(() => {
    subject.next(ship.id + ' a' + new Date());
  }, 1000);
  setTimeout(() => {
    subject.next(ship.id + ' b' + new Date());
    subject.complete();
  }, 2000);
  return subject.asObservable();
}

// The result should be the following (t, is the time in seconds, t3, is time after 3 seconds)
// t0: >>> 1
// t0: >>> 3
// t1: 1 a
// t1: 2 a
// t2: 1 b
// t2: 2 b
// t2: >>> 2 (note that the second ship didn't call the createSubject until the first finished)
// t3: 1 a
// t4: 1 2

解决方案（在A.Winnen的大力帮助下，并且找到了解决方案的人

在此处运行：https://stackblitz.com/edit/angular-8zopfk?file=src/app/app.component.ts

  const ships = [
    {
      id: 1,
      planetId: 1,
    },
    {
      id: 2,
      planetId: 1,
    },
    {
      id: 3,
      planetId: 2,
    }
  ];
  const createSubject = (ship) => {
    console.log(ship.id + ' a')
    const subject = new Subject();
    setTimeout(() => {
      //subject.next(ship.id + ' b');
    }, 500);//
    setTimeout(() => {
      subject.next(ship.id + ' c');
      subject.complete();//
    }, 1000);
    return subject.asObservable();
  }
  let x = 0;
  interval(10).pipe(//
    take(ships.length),
    map(i => ships[i]),
    groupBy(s => s.planetId),
    mergeMap(group$ => {//
      x++
      return group$.pipe(
        tap(i => console.log('x', i, x)),
        concatMap(createSubject)
      )
    }),
  ).subscribe(res => console.log('finish', res), undefined, () => console.log("completed"))

这如何在rxjs中完成？

代码：

  const shipArriveAction$ = action$.pipe<AppAction>(
    ofType(ShipActions.arrive),
    groupBy(action => action.payload.ship.toPlanetId),
    mergeMap((shipByPlanet$: Observable<ShipActions.Arrive>) => {
      return shipByPlanet$.pipe(
        groupBy(action => action.payload.ship.id),
        mergeMap((planet$) => {
          return planet$.pipe(
            concatMap((action) => {
              console.log(`>>>concat`, new Date(), action);
              // this code should be called in sequence for each ship with the same planet. I don't need only the results to be in order, but also this to be called in sequence.
              const subject = new Subject();
              const pushAction: PushAction = (pushedAction) => {
                subject.next(pushedAction);
              };
              onShipArriveAction(state$.value, action, pushAction).then(() => {
                subject.complete();
              });
              return subject.asObservable();
            }),
          )
        })
      );

    )
  ;

A.Winnen的代码非常接近，但仅适用于可观察到的，不连续的源代码：

    const ships = [
      {
        id: 1,
        planetId: 1,
      },
      {
        id: 2,
        planetId: 1,
      },
      {
        id: 3,
        planetId: 2,
      }
    ];
    const createSubject = (ship) => {
      console.log(ship.id + ' a')
      const subject = new Subject();
      setTimeout(() => {
        subject.next(ship.id + ' b');
      }, 1000);//
      setTimeout(() => {
        subject.next(ship.id + ' c');
        subject.complete();//
      }, 2000);
      return subject.asObservable().pipe(
        finalize(null)
      );
    }

    interval(1000).pipe(
      take(ships.length),
      tap(console.log),
      map(i => ships[i]),
      groupBy(s => s.planetId),
      mergeMap(group => group.pipe(toArray())),
      mergeMap(group => from(group).pipe(
        concatMap(createSubject)
      ))
    ).subscribe(res => console.log(res), undefined, () => console.log("completed"))

Answer 1

您可以结合使用groupBy和mergeMap来实现您的目标。

from(ships).pipe(
  groupBy(ship => ship.planetId),
  mergeMap(planetGroup => planetGroup.pipe(
    concatMap(ship => {
      // do real processing in this step
     return of(`planetGroup: ${planetGroup.key} - processed ${ship.ship}`);
    })
  ))
).subscribe(result => console.log(result));

我举了一个简单的例子：https://stackblitz.com/edit/angular-6etaja?file=src%2Fapp%2Fapp.component.ts

编辑： 更新的闪电战：https://stackblitz.com/edit/angular-y7znvk