@ngrx/store#select TypeScript Examples

updateRouteAnimationType = createEffect(
    () =>
      merge(
        INIT,
        this.actions$.pipe(
          ofType(
            actionSettingsChangeAnimationsElements,
            actionSettingsChangeAnimationsPage
          )
        )
      ).pipe(
        withLatestFrom(
          combineLatest([
            this.store.pipe(select(selectPageAnimations)),
            this.store.pipe(select(selectElementsAnimations))
          ])
        ),
        tap(([action, [pageAnimations, elementsAnimations]]) =>
          this.animationsService.updateRouteAnimationType(
            pageAnimations,
            elementsAnimations
          )
        )
      ),
    { dispatch: false }
  );

loadResults$ = createEffect(() =>
    this.actions$.pipe(
      ofType(REQUEST_MORE_RESULTS),
      // mergeMap is used because of multiple search concerns
      // TODO: should implement our own switchMap to filter by searchId
      mergeMap((action: SearchActions) =>
        this.authService.authReady().pipe(
          withLatestFrom(
            this.store$.pipe(select(getSearchStateSearch, action.id))
          ),
          switchMap(([, state]) =>
            this.searchService.search(
              'bucket',
              JSON.stringify(
                this.esService.getSearchRequestBody(
                  state.config.aggregations,
                  state.params.size,
                  state.params.from,
                  state.params.sortBy,
                  state.config.source,
                  state.params.filters,
                  state.config.filters
                )
              )
            )
          ),
          switchMap((response: EsSearchResponse) => {
            const records = this.esMapper.toRecords(response)
            const aggregations = response.aggregations
            return [
              new AddResults(records, action.id),
              new SetResultsAggregations(aggregations, action.id),
              new SetResultsHits(response.hits.total, action.id),
            ]
          })
        )
      ) // wait for auth to be known
    )
  )

loadAssets$ = createEffect(() => this.actions$.pipe(
    ofType(loadAssets),
    withLatestFrom(
      this.store$.pipe(select(selectLoadedAssets))
    ),
    switchMap(([action, loadedAssets]) => {
      this.store$.dispatch(setLoadingMessage({message: 'Loading website assets.'}));
      if ( loadedAssets ) {
        this.store$.dispatch(setLoadingMessage({message: '<b>Loading</b> done.'}));
        return [loadAssetsSuccess({loadedAssets})];
      } else {
        return this.assetsService.getAll().pipe(
          switchMap(assets => {
            this.store$.dispatch(setLoadingMessage({message: '<b>Loading</b> done.'}));
            return of(assets);
          }),
          delay(2000),
          switchMap(assets => {
            return of(loadAssetsSuccess({loadedAssets: assets}));
          })
        );
      }
    }))
  );

init(searchId: string = DEFAULT_SEARCH_KEY): void {
    this.searchId = searchId
    this.store.dispatch(new AddSearch(searchId))

    this.results$ = this.store.pipe(select(getSearchResults, searchId))
    this.layout$ = this.store.pipe(select(getSearchResultsLayout, searchId))
    this.isLoading$ = this.store.pipe(select(getSearchResultsLoading, searchId))
    this.searchFilters$ = this.store.pipe(select(getSearchFilters, searchId))
    this.resultsHits$ = this.store.pipe(select(getSearchResultsHits, searchId))
    this.isEndOfResults$ = this.store.pipe(select(isEndOfResults, searchId))
    this.configAggregations$ = this.store.pipe(
      select(getSearchConfigAggregations, searchId)
    )
    this.resultsAggregations$ = this.store.pipe(
      select(getSearchResultsAggregations, searchId)
    )
    this.sortBy$ = this.store.pipe(select(getSearchSortBy, searchId))
  }

initBonuses() {
    this.bonusCards$ = this.store.pipe(
      select(({ app }) => app.bonusCards),
      map(cards => {
        const filteredCards = cards.filter(card => card['VP Average'] && bonusSearchMap[card.id](this.data.card))
        filteredCards.sort((a, b) => b['VP Average'] - a['VP Average'])
        return filteredCards
      })
    )
    this.cardWrapper?.nativeElement.scroll(0, 0)
    this.carousel?.nativeElement.scroll(0, 0)
  }

ngOnInit(): void {
    this.storageService.testLocalStorage();
    if (AppComponent.isIEorEdgeOrSafari()) {
      this.store.dispatch(
        actionSettingsChangeAnimationsPageDisabled({
          pageAnimationsDisabled: true
        })
      );
    }

    this.isAuthenticated$ = this.store.pipe(select(selectIsAuthenticated));
    this.stickyHeader$ = this.store.pipe(select(selectSettingsStickyHeader));
    this.language$ = this.store.pipe(select(selectSettingsLanguage));
    this.theme$ = this.store.pipe(select(selectEffectiveTheme));
  }

constructor(private store: Store<fromBooks.State>) {
    this.searchQuery$ = store.pipe(
      select(fromBooks.selectSearchQuery),
      take(1)
    );
    this.books$ = store.pipe(select(fromBooks.selectSearchResults));
    this.loading$ = store.pipe(select(fromBooks.selectSearchLoading));
    this.error$ = store.pipe(select(fromBooks.selectSearchError));
  }

setTranslateServiceLanguage = createEffect(
    () => () =>
      this.store.pipe(
        select(selectSettingsLanguage),
        distinctUntilChanged(),
        tap((language) => this.translateService.use(language))
      ),
    { dispatch: false }
  );

upload$ = this.store.pipe(select(getUpload))

awayScore$ = this.scoreboard$.pipe(select((state) => state.away));

isLoading$ = this.store.pipe(select(MdViewSelectors.getMetadataIsLoading))

count$ = this.store$.pipe(select((state) => state.counter.count));

ngOnInit() {
    this.settings$ = this.store.pipe(select(selectSettings));
  }

consoleMessages$ = this.store$.pipe(select(selectConsoleMessages));

signInRun$ = this.store.pipe(select(AuthSelectors.getSignInRun))

constructor(private store: Store<fromBooks.State>) {
    this.book$ = store.pipe(
      select(fromBooks.selectSelectedBook)
    ) as Observable<Book>;
    this.isSelectedBookInCollection$ = store.pipe(
      select(fromBooks.isSelectedBookInCollection)
    );
  }

/**
   * get user load status
   */
  userLoadRun$ = this.store.pipe(select(UserSelectors.getUserLoadRun))

constructor(private store: Store<fromRoot.State & fromAuth.State>) {
    /**
     * Selectors can be applied with the `select` operator which passes the state
     * tree to the provided selector
     */
    this.showSidenav$ = this.store.pipe(select(fromRoot.selectShowSidenav));
    this.loggedIn$ = this.store.pipe(select(fromAuth.selectLoggedIn));
  }

signInError$ = this.store.pipe(select(AuthSelectors.getSignInFailure))

loading$ = this.store$.pipe(select(selectLoading));