Ngrx извлекает данные, только если хранилище пусто - PullRequest
Новая
       62

Ngrx извлекает данные, только если хранилище пусто

0 голосов
/ 17 апреля 2020

Давайте предположим, что в моем приложении у меня есть 3 страницы: Факультеты, Группы, Специальности.

Вот как выглядит интерфейс для этих объектов: 

interface Faculty {
  faculty_id: number;
  faculty_name: string;
  faculty_description: string;
}
interface Speciality {
  speciality_id: number;
  speciality_code: string;
  speciality_name: string;
}
interface Group {
  group_id: number;
  group_name: string;
  speciality_id: number;
  faculty_id: number;
}

Когда я go в page Факультеты в ngOnInit Я проверяю логическое свойство в FacultyState. Если факультеты уже загружены, не отправляйте никаких действий в Effect, служба выполнит http-запрос.

То же, что я сделал для Страница специальности.

Факультетский компонент (Специальность также похожа) 

ngOnInit(): void {
        this.store.pipe(
          select(areFacultiesLoaded),
          tap((hasLoaded) => {
            if (!hasLoaded) {
              this.store.dispatch(loadAllFaculties())
            }
          })
        ).subscribe();


       this.faculties$ = this.store.pipe(select(selectAllFaculties))
      }

Эффект 

@Injectable()
export class FacultyEffects {
    loadFaculties$ = createEffect(() => {
        return this.actions$.pipe(
                ofType(FacultyAction.loadAllFaculties),
                concatMap(() => {
                   return this.apiService.getEntity('Faculty').pipe(
                        map(data => FacultyAction.allFacultiesLoaded({ faculties: data })),
                        catchError(() => EMPTY)
                        )}
                    ),
        );
    });

Задача

Например, я могу go сначала на страницу группы, которая также нуждается в факультетах и ​​специальностях.

  1. Должен ли я снова проверить, загружены ли факультеты и специальности?
  2. Должен ли я создать другое действие для групп, например - [ Страница групп] выбрать все факультеты (специальности)
  3. Должен ли я создать другие эффекты для этих действий?

1 Ответ

0 голосов
/ 18 апреля 2020

См. https://timdeschryver.dev/blog/start-using-ngrx-effects-for-this#4 использование селектора внутри ваших эффектов для получения дополнительной информации 

@Effect()
getOrder = this.actions.pipe(
  ofType<GetOrder>(ActionTypes.GetOrder),
  withLatestFrom(action =>
    of(action).pipe(
      this.store.pipe(select(getOrders))
    )
  ),
  filter(([{payload}, orders]) => !!orders[payload.orderId])
  mergeMap([{payload}] => {
    ...
  })
)
...