Использование RxJS CombineLatest с поиском или выбором - PullRequest
Новая
       46

Использование RxJS CombineLatest с поиском или выбором

0 голосов
/ 03 июня 2018

В моем приложении я использую NGRX и RXJS.У меня есть окно, в котором пользователь может отфильтровать заказ, введя текст произвольной формы в текстовое поле или щелкнув элемент заказа на странице, чтобы просмотреть подробности.

У меня есть две наблюдаемые, которые я хочу вызватьмой магазин и получить детали, фильтруя в любом случае, но я хотел бы использовать функцию combLatest, чтобы упростить мой код.Текстовый поиск передается в строке для поиска, а щелчок - в числовом идентификаторе.У меня это уже есть в моем коде: 

//Text search
 this.valueChanges = this.search.valueChanges
      .pipe(debounceTime(170), distinctUntilChanged())
      .subscribe(value => {
        this.hasValue = value.length > 0;
        this.store$.dispatch(new QueryAction({ value }));
      });

//Item click
      this.clickChanges = this.selected$.subscribe(value => {  
        let Id = value.id.toString();    
        this.store$.dispatch(new QueryAction({ value: Id }));
      });

Мой вопрос заключается в том, как я могу упростить этот код для использования combLatest, поскольку оба они очень похожи, а также осуществляют поиск элементов, хранящихся в магазине, для фильтрации по тексту.набрал.

1 Ответ

0 голосов
/ 03 июня 2018

Я отвечу на вопрос в двух частях, вы хотите объединить два потока и запустить QueryAction, который должен быть довольно простым, как 

const searchStream =  this.search.valueChanges
  .pipe(debounceTime(170), 
        distinctUntilChanged(), 
        filter(value => value.length > 0)
        );
const clickStream = this.selected$.pipe(map(value => value.id.toString());
merge(searchStream, clickStream)
.pipe(tap(value => this.store$.dispatch(new QueryAction({ value: value }), 
      takeWhile(() => !destroy) // make destroy= true in ngOnDrestroy()
).subscribe();

Заметьте, что я использую слияние вместо объединитьПоследний, потому чтопозже будет ожидать, что оба потока произведут что-то до того, как это действие будет запущено, и вы получите оба значения, то, что вы хотите, если либо поиск, либо щелчок производят событие, то действие должно инициироваться, поэтому я использую слияние.

Теперь я порекомендую вам пересмотреть то, как вы к этому подходите, не уверенный, если вы читали о философии dumb vs smart, поищите в Google, если у вас ее нет, это очень помогает при использовании ngrx,посмотрите пример приложения ngrx https://github.com/ngrx/platform/tree/master/example-app,for me, который был лучшим документом.
Если я хорошо понимаю, чего вы хотите достичь, у меня будет тупой компонент для поиска ввода (это изображение, я думаю, является своего рода предложениемполе (автозаполнение элемента), которое выводит событие запроса, когда опция выбрана с помощью щелчка иливведите, и страница списка элементов будет еще одним немым компонентом, который выводит событие запроса при щелчке; каждое событие будет привязано к одному и тому же методу в контейнере (интеллектуальном компоненте), который отправит QueryAction. Надеюсь, это поможет

...