Избегайте диспетчера NgRx / Store для бесконечных циклов

Question

Мы строим универсальный магазин, и API магазина требует удалить предыдущий товар из нашей корзины перед тем, как добавить новый (теоретически, в вашей корзине не может быть более одного товара). Для этого у нас есть ShopState, который хранит корзину и продукты. Когда товар добавляется в корзину, диспетчер магазина запускает эффект addProduct, который использует службу, такую ​​как:

Эффект

  @Effect()
  addProduct$ = this.actions$.pipe(
    ofType(cartActions.ActionTypes.CART_ADD_PRODUCT),
    switchMap((action: cartActions.CartAddProduct) => {
      return this.cartService
        .addProduct(action.payload)
        .pipe(map((res: Cart) => new cartActions.CartLoaded(res)));
    })
  );

Служба

  addProduct(payload: string): Observable<Cart> {
    return this.store.pipe(
      select(fromCartSelectors.getItems),
      switchMap(items => {
        return of(forkJoin(items.map(item => {
        return this.http.delete(`${environment.shop}/carts/${this.token}/items/${item['id']}`);
        })));
      }),
      switchMap(res => {
        return this.http
          .post(`${environment.shop}/carts/${this.token}/items`, { productCode: payload })
          .pipe(map(res => ObjectMapper.deserialize(Cart, res)));
      })
    );

Поведениекогда срабатывает эффект addProduct, он постоянно добавляет и удаляет элемент. Каков наилучший подход к решению этой проблемы?

Answer 1

Проблема заключается в select(fromCartSelectors.getItems), который выдает новое значение при изменении состояния.

Вам не следует обращаться к хранилищу внутри простой службы, он должен выполнять только HTTP-вызов. Если вы переместите логику селектора внутрь эффекта, он будет работать правильно.

Проблема в том, что addProduct не завершается, поэтому эффект будет продолжать отправлять новые испущенные действия.