Как прикрепить ngrx / store с угловой защитой маршрутизатора

Я не совсем понимаю, почему вы отправляете разрешенные данные в свой компонент через преобразователь. Весь смысл настройки хранилища ngrx заключается в том, чтобы иметь единый источник данных. Итак, что вы просто хотите здесь сделать, это убедиться, что данные верны. Остальное, компонент может получить данные из магазина с помощью селектора.

Я вижу, что вы вызываете LOAD_ACTION из метода ngOnInit вашего компонента. Вы не можете вызвать действие для разрешения данных, которое затем приведет к компоненту, Init которого вы вызываете действие! Вот почему ваш маршрутизатор не загружает маршрут.

Не уверен, что вы это поняли, но в этом есть смысл!

Проще говоря, вы делаете вот что. Вы запираете комнату, а затем проталкиваете ключ в щель под дверью, а затем задаетесь вопросом, почему дверь не открывается.

Ключ держите при себе!

Метод разрешения охранника должен вызывать LOAD_ACTION. Затем решение должно дождаться загрузки данных, а затем маршрутизатор должен перейти к компоненту.

Как ты это делаешь?

Другие ответы - это настройка подписок, но дело в том, что вы не хотите этого делать в своих охранниках. Не рекомендуется подписываться в охранниках, так как тогда их нужно будет отменить, но если данные не разрешены или охранники вернут false, тогда маршрутизатор никогда не сможет отказаться от подписки, и у нас будет беспорядок.

Итак, используйте take(n). Этот оператор получит n значений из подписки, а затем автоматически завершит подписку.

Также в ваших действиях вам понадобятся LOAD_STATISTICS_SUCCESS и LOAD_STATISTICS_FAIL. Как ваш метод обслуживания может дать сбой!

В редукторе State вам понадобится свойство loaded, которое превращается в true, когда вызов службы успешен и вызывается действие LOAD_STATISTICS_SUCCESS.

Добавьте селектор в главный редуктор, getStatisticsLoaded, а затем в свой gaurd, ваша установка будет выглядеть так:

resolve(): Observable<boolean> {

this.store.dispatch({type: LOAD_STATISTICS});

return this.store.select(getStatisticsLoaded)
    .filter(loaded => loaded)
    .take(1);

}

Таким образом, только когда загруженное свойство изменится на true, фильтр позволит продолжить поток. take примет первое значение и передаст его дальше. На этом разрешение завершается, и маршрутизатор может продолжить.

Опять же take убьет подписку.

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

Я реализовал CanActivate Guard следующим образом:

@Injectable()
export class TelefonieStatisticGuard implements CanActivate {
    constructor(private store: Store<AppState>) {}

    waitForDataToLoad(): Observable<Statistic> {
        return this.store.select(state => state.statistic)
            .filter(statistic => statistic && !statistic.empty);
    }

    canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
        this.store.dispatch({type: LOAD_STATISTIC});

        return this.waitForDataToLoad()
            .switchMap(() => {
                return Observable.of(true);
            });
        }
    }
}

Метод canActivate (...) сначала отправляет действие для загрузки данных. В waitForDataToLoad () мы фильтруем, что данные уже есть, а не пусты (деталь реализации моей бизнес-логики).

После того, как это вернет true, мы вызываем switchMap, чтобы вернуть Observable, равное true.

Я предполагаю, что под "охраной маршрутизатора" вы имеете в виду resolve охранника? Вы хотите, чтобы данные загружались перед активацией маршрута?

Если да, то все должно хорошо сочетаться:

• Значения из ngrx / store представлены как наблюдаемые (например, в их документах store.select('counter') содержит наблюдаемое).
• В Angular resolve охранники могут возвращать наблюдаемые.

Таким образом, вы можете просто вернуть наблюдаемый ngrx / store из своего решения:

class MyResolver implements Resolve<any> {

  constructor(private store: Store<any>) {}

  resolve(): Observable<any> {
    // Adapt code to your situation...
    return this.store.select('statistics');
  }
}

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

Что вы получаете от хранения статистики в состоянии? (по сравнению с простой загрузкой и отображением в каком-либо компоненте)

Если загрузка не удалась, возможно, вы захотите отменить навигацию. Это можно сделать, выдав ошибку. Самое главное - возвращаемый наблюдаемый должен быть завершен или завершиться с ошибкой.

resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
): Observable<boolean> {

    this.store.dispatch(new LoadStatistic(route.params.someParam));

    return this.store.pipe(select(selectStatisticModel),
        filter(s => !s.isLoading),
        take(1),
        map(s => {
            if (!s.isLoadSuccess) {
                throw s.error;
            }
            return true;
        })
    );
}

Это также учитывает неудавшийся запрос:

canActivate(): Observable<boolean> {
    this.store.dispatch({type: LOAD_STATISTICS);

    return this.store.select((state) => state.statistics)
      .filter((statistics) => statistics.loaded || statistics.loadingFailed)
      .map((statistics) => statistics.loaded);
  }

Этот ответ для людей, которые разочаровываются в использовании ngrx / effect в этой ситуации. Может быть, лучше использовать простой подход без ngrx / effects.

canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
    // this will only dispatch actions to maybe clean up, NO EFFECTS 
    this.store.dispatch({type: LOAD_STATISTIK});     

  return this.service.loadOne()
     .do((data) => {
         this.store.dispatch({type: LoadSuccess, payload: data })
      }).map(() => {
      return true; 
    })  
}