При загрузке исходных данных, как лучше всего дождаться, пока аутентификация пользователя вернет идентификатор, а затем извлечь данные из службы, используя этот идентификатор?

Question

Мое приложение встроено angular с NGRX. Я отправляю действие getUser () для получения идентификатора пользователя. Я хотел бы дождаться возвращения идентификатора пользователя, а затем извлечь все элементы для этого пользователя из службы базы данных.

Как этого лучше всего достичь? Я думал о создании действия и эффекта, называемого getInitialData, который бы связывал действия. У меня есть два редуктора, один для пользователя и один для предметов.

Должен ли я создать службу getInitialData action + в пользовательском редукторе ИЛИ создавать новый редуктор?

Answer 1

Способ решения этой проблемы:

Действия пользователя:

• GetUser
• GetUserSuccess (полезная нагрузка: {userID: string)
• GetUserFail (полезная нагрузка: {ответ: любой})

Действия UserItems:

• GetUserItems (полезная нагрузка: {userId: string})
• GetUserItemsSuccess ( полезная нагрузка: {items: any})
• GetUserItemsFail (полезная нагрузка: {response: any})

Затем я регистрирую эффект, который ожидает действия GetUserSuccess, которое возвращает новое действие: GetUserItems.

Примечание. Вы можете прослушивать действие GetUserSuccess из эффекта. Сначала будет вызван редуктор, поэтому при вызове эффекта хранилище уже обновляется с помощью userId (на случай, если вам нужен доступ к хранилищу)

Надеюсь, это поможет

Answer 2

Этот вопрос в первую очередь основан на мнении, но я дам вам один способ, которым это можно решить с помощью ngrx/effects.

Чего люди часто упускают, так это того, что эффекты не должны ждать действий, При срабатывании любой наблюдаемый является допустимым источником для запуска эффекта.

Например, посмотрите на эффект ниже. Он будет выводить 0,1,2,3 ... бесконечно. Источником здесь является обычный оператор interval из rjxs.

  timerEffect$ = createEffect(() =>
    interval(1000)
      .pipe(
        tap((val) => {
          console.log(val);
        })
      ), {dispatch: false}
  );

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

  loadUserData$ = createEffect(() =>
    this.userId$
      .pipe(
        mergeMap((userId) => {
          return [action1, action2, action3] // A bunch of actions that loads relevant data
        })
      )
  );

Конечно, вы можете разделить его еще больше, но это сделает работу.

Что касается лучшей практики, я не могу сказать. Вопрос к широкой и основанной на мнениях.