将 Nx 的数据持久化功能与 NgRx 效果结合使用是否有任何客观好处？

Question

我有一个 Angular 应用程序以及 Nrwl 的 NgRx 和 Nx。Nx 提供了一些“数据持久化”功能，可以帮助您获取、乐观和悲观更新以及处理导航，但我不确定为什么要使用它们而不是普通管道。

下面是 StackBlitz 上的一个示例，显示了一些效果与optimisticUpdate其他pessimisticUpdate效果的结合，以及在没有这些效果的情况下执行相同操作的其他效果。

问题是 - 这些 Nx 功能提供什么优势？

作为参考，这里是来自 StackBlitz 的效果文件：

@Injectable()
export class CarsEffects {
  updateCarOptimistic = createEffect(() =>
    this.actions.pipe(
      ofType(CarsActions.updateCarOptimistic),
      switchMap(({ selected, oldSelected, mockError }) =>
        this.carsService.updateCar(selected, mockError).pipe(
          map(() => CarsActions.updateCarOptimisticSuccess()),
          catchError(error => {
            this.store.dispatch(
              CarsActions.updateCarOptimisticFailure({ oldSelected, error })
            );
            return of(null);
          })
        )
      )
    )
  );

  updateCarOptimisticWithNx = createEffect(() =>
    this.actions.pipe(
      ofType(CarsActions.updateCarOptimisticWithNx),
      optimisticUpdate({
        run: ({ selected, mockError }) =>
          this.carsService
            .updateCar(selected, mockError)
            .pipe(map(() => CarsActions.updateCarOptimisticWithNxSuccess())),
        undoAction: ({ oldSelected }, error) =>
          CarsActions.updateCarOptimisticWithNxFailure({ oldSelected, error })
      })
    )
  );

  updateCarPessimistic = createEffect(() =>
    this.actions.pipe(
      ofType(CarsActions.updateCarPessimistic),
      switchMap(({ selected, mockError }) =>
        this.carsService.updateCar(selected, mockError).pipe(
          map(() => CarsActions.updateCarPessimisticSuccess({ selected })),
          catchError(error =>
            of(CarsActions.updateCarPessimisticFailure({ error }))
          )
        )
      )
    )
  );

  updateCarPessimisticWithNx = createEffect(() =>
    this.actions.pipe(
      ofType(CarsActions.updateCarPessimisticWithNx),
      pessimisticUpdate({
        run: ({ selected, mockError }) =>
          this.carsService
            .updateCar(selected, mockError)
            .pipe(
              map(() =>
                CarsActions.updateCarPessimisticWithNxSuccess({ selected })
              )
            ),
        onError: (_, error) =>
          CarsActions.updateCarPessimisticWithNxFailure({ error })
      })
    )
  );

  constructor(
    private actions: Actions,
    private store: Store,
    private carsService: CarsService
  ) {}
}

注意：我的意思并不是说这是一个关于更好的语法的意见问题；只是想让我的代码尽可能高效、安全和干净，并且如果它们在幕后做一些我不知道的事情，我想使用这些函数。

Answer 1

是的，如果您提供id选择器功能。查看此处的示例。在我自己的测试中，如果您多次分派一个操作，则每个请求都会通过，除非您使用id选择器。添加后，fetch如果使用相同 ID 进行新操作，将取消任何现有网络请求。

此功能可以通过简单的操作符获得switchMap，但该fetch实用程序还有另一个switchMap未提供的优点：在网络请求正在进行时分派具有不同ID 的操作不会取消当前请求。

考虑以下示例：

this.store.dispatch(getUser('AAA'));
this.store.dispatch(getUser('BBB'));
this.store.dispatch(getUser('AAA'));

使用 时switchMap，只有最后一个请求才会通过，因此您永远不会成功获取 user BBB。但是，使用 时fetch，最后两个请求将得到满足。