Эффекты NgRx в сочетании с операторами Rx JS - PullRequest
Новая
       6

Эффекты NgRx в сочетании с операторами Rx JS

0 голосов
/ 27 марта 2020

Кто-нибудь знает, почему не работает оператор 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]}) ) 
        );
    }

1 Ответ

0 голосов
/ 27 марта 2020

Используйте просто оператор 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 является правильным выбором, точно так же, как вы это сделали извлечь 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]})
  ]) 
);

Дополнительные пояснения:

...