NgRx 效果与 RxJS 运算符相结合答案

【问题标题】：NgRx effects combined with RxJS operatorsNgRx 效果与 RxJS 运算符相结合
【发布时间】：2020-03-27 20:43:20
【问题描述】：

有谁知道为什么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]}) ) 
        );
    }

【问题讨论】：

switchMap 需要 Observable、Promise、Array 或 Iterable，但您提供了 Action。

标签： angular rxjs ngrx

【解决方案1】：

只需使用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。例如，返回 HttpClient.get 的结果：

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

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

另请注意，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]})
  ]) 
);

更多解释：

【讨论】：

这是否意味着我也可以将动作放入这样的数组中？ @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]})] ) ); }
这意味着switchMap(() => [x]) 将具有与map(() => x) 类似的效果，通过发出数组中的唯一值。但在这种情况下，map 的语法更清晰。
很高兴，欢迎您加入。但是请花时间阅读stackoverflow.com/help/someone-answers。点赞比添加评论更好。谢谢。