时间戳

首页 > 解决方案 > NgRx 效果与 RxJS 运算符相结合

angular - NgRx 效果与 RxJS 运算符相结合

问题描述

有谁知道为什么switchMap操作员不工作？

我试图map改用第二个操作员并且它有效，但我不明白为什么switchMap不工作。

    @Injectable()
    export class PizzasEffects {
        constructor(private actions: Actions, private pizzasService: PizzasService) {}

    @Effect()
        createPizzaSuccess$ = this.actions.ofType( fromPizzasActions.CREATE_PIZZA_SUCCESS ).pipe(
          map( (action: fromPizzasActions.CreatePizzaSuccess) => action.payload ),
          switchMap( (pizza: Pizza) => new  fromRouterActions.Go({path: ['products', pizza.id]}) ) 
        );
    }

标签： angularrxjsngrx

解决方案

使用简单map的运算符代替switchMap如下：

@Effect()
  createPizzaSuccess$ = this.actions.ofType(fromPizzasActions.CREATE_PIZZA_SUCCESS).pipe(
      map(action => action.payload),
      map(pizza => new fromRouterActions.Go({path: ['products', pizza.id]})) 
);

switchMap运营商期待一个Observable. 例如，要返回 a 的结果HttpClient.get：

@Effect()
  createPizzaSuccess$ = this.actions.ofType(fromPizzasActions.CREATE_PIZZA_SUCCESS).pipe(
  map(action => action.payload),
  switchMap(pizza => this.httpClient.get(URL)) 
);

但是在您的情况下，发出的值只是一个Action，因此map运算符是正确的选择，就像您payload从action.

另请注意，这switchMap需要一个流，您可以提供 Observable、Promise、Array 或 Iterable。

这意味着，在 的情况下NgRx，它在某些情况下可能很有用，为一个返回多个动作effect，因此是一组动作：

@Effect()
  createPizzaSuccess$ = this.actions.ofType(fromPizzasActions.CREATE_PIZZA_SUCCESS).pipe(
  map(action => action.payload),
  switchMap(pizza => [
    new fromUIActions.showNotification({ message: 'Pizza loaded' }),
    new fromRouterActions.Go({path: ['products', pizza.id]})
  ]) 
);

更多解释：

推荐阅读