Как я могу создать вложенные трубы магазина?

Question

Я пытаюсь добиться варианта использования, когда у меня есть ДВУХ магазинов, из которых я должен получить значения в последовательности. Цель состоит в том, чтобы в конечном счете вызвать службу http с этими двумя значениями, извлеченными из магазинов.

Я попытался создать две отдельных наблюдаемых, чтобы получить значения обратно по отдельности, а затем передать их httpClient - но мне любопытно, должен ли я это сделать или я должен попытаться сделать следующее, например, выбор канала NESTED?

function userservice() {
    this.store.pipe(
    select(fromRoot.getCategories),
    take(1),
    switchMap(category => {
        this.otherstore.pipe(
        select(fromRoot.getUsers),
        take(1),
        switchMap(user => {
           return httpClient.get( apistuff with params user and category)
        })
    })
}

Интересно, это правильный подход или мне нужно поискать две переменные user и category в качестве средства отборочного выбора () и затем вызвать httpclient?

Answer 1

Технически, ваш код в порядке, но лучше избегать вложения, потому что это приводит к ситуации, которая имеет обещания - ад обратного вызова.Если вы избегаете вложения, это делает ваш код более читабельным / понятным.

Если ваша внутренняя наблюдаемая зависит от внешней наблюдаемой, тогда необходимо выполнить вложение, в противном случае вы можете просто составить те, которые наблюдаются, чтобы создать объединенное значение в вашемнаблюдаемый конвейер.

В вашем примере -

Если ваши категории и пользователи независимы, то вы должны сделать следующее, чтобы избежать вложения -

 function userservice() {

  return combineLatest( //or you can use zip operator as per your requirement
    this.store.pipe(
      select(fromRoot.getCategories),
      take(1)),
    this.otherstore.pipe(
        select(fromRoot.getUsers),
        take(1))
  ).pipe(
    switchMap(([categories, users]) => {
        return httpClient.get( apistuff with params user and category);
    })
  );

Если пользователи зависят от категорий, то вы можете сделать следующее [этот пример просто показывает требуемую вложенность;не относится к вашему сценарию] -

function userservice() {

  return this.store.pipe(
    select(fromRoot.getCategories),
    take(1),
    switchMap(categories => {
      return this.httpClient.get(/*get users for categories*/)
                 .pipe(
                   switchMap(users => this.httpClient.get( //apistuff with params user and category))
                 );
    })
  )  
}

Вы можете избежать вложения в приведенный выше код, изменив код, как показано ниже -

function userservice() {

  return this.store.pipe(
    select(fromRoot.getCategories),
    take(1),
    switchMap(categories => {
      return zip(this.httpClient.get(/*get users for categories*/), of(categories)); //you can use combineLatest as well as per your need
    }),
    switchMap(([users, categories]) => {
      return httpClient.get( apistuff with params user and category);
    })
  )  
}