How to use the @ngxs/router-plugin.RouterState.state function in @ngxs/router-plugin

private updateURL(ctx: StateContext, action: UpdateUrl) {
    const update = action.update;
    const params: { [key: string]: string | null } = {};
    const routeState = this.store.selectSnapshot(RouterState.state);
    // For Unit Testing
    // Maybe this is a solution to not modify production code: https://github.com/ngxs/store/blob/master/packages/router-plugin/tests/router.plugin.spec.ts
    if (routeState == undefined) {
      return;
    }
    const routeSnapshot: ActivatedRouteSnapshot = routeState.root;
    if (update.searchFilter != null) {
      update.searchFilter.forEach(filter => {
        params[filter.filterColumn.id] = filter.filterValue;
      });
      // Remove Query Params that are not used anymore by setting them 'null' explicitly
      if (routeSnapshot.firstChild != null && routeSnapshot.firstChild.firstChild != null) {
        const queryParams = routeSnapshot.firstChild.firstChild.queryParams;
        Object.keys(queryParams).forEach(queryParamKey => {
          if (params[queryParamKey] == null) {
            if (!isSortKey(queryParamKey)) {

ngOnInit() {
    this.crumbs$ = this.store
      .select(RouterState.state)
      .pipe(map(state => Array.from(state.breadcrumbs, ([key, value]) => ({ name: key, link: '/' + value }))));

    this.depth$ = this.store.select(RouterState.state).pipe(map(state => state.data.depth));
  }

ngOnInit() {
    this.crumbs$ = this.store
      .select(RouterState.state)
      .pipe(map(state => Array.from(state.breadcrumbs, ([key, value]) => ({ name: key, link: '/' + value }))));

    this.depth$ = this.store.select(RouterState.state).pipe(map(state => state.data.depth));
  }

ngOnInit() {
    this.crumbs$ = this.store
      .select(RouterState.state)
      .pipe(map(state => Array.from(state.breadcrumbs, ([key, value]) => ({ name: key, link: '/' + value }))));

    this.depth$ = this.store.select(RouterState.state).pipe(map(state => state.data.depth));

    this.mediaObserver
      .asObservable()
      .pipe(
        filter((changes: MediaChange[]) => changes.length > 0),
        map((changes: MediaChange[]) => changes[0]),
      )
      .subscribe((change: MediaChange) => {
        const isMobile = change.mqAlias === 'xs' || change.mqAlias === 'sm';

        this.isMobile = isMobile;
        this.sidenavMode = isMobile ? 'over' : 'side';
        this.sidenavOpen = !isMobile;
      });

    this.router.events.pipe().subscribe(event => {

ngOnInit() {
    this.crumbs$ = this.store
      .select(RouterState.state)
      .pipe(map(state => Array.from(state.breadcrumbs, ([key, value]) => ({ name: key, link: '/' + value }))));

    this.depth$ = this.store.select(RouterState.state).pipe(map(state => state.data.depth));

    this.mediaObserver
      .asObservable()
      .pipe(
        filter((changes: MediaChange[]) => changes.length > 0),
        map((changes: MediaChange[]) => changes[0]),
      )
      .subscribe((change: MediaChange) => {
        const isMobile = change.mqAlias === 'xs' || change.mqAlias === 'sm';

        this.isMobile = isMobile;
        this.sidenavMode = isMobile ? 'over' : 'side';
        this.sidenavOpen = !isMobile;

public getCurrentRouteAsArray(): string[] {
    const navState = this.store.selectSnapshot(RouterState.state);
    return [
      navState.root.firstChild.url[0].path,
      ...navState.root.firstChild.firstChild.url.map(obj => {
        return obj.path;
      })
    ];
  }
}

import { Component } from '@angular/core';
import { Select } from '@ngxs/store';
import { RouterState } from '@ngxs/router-plugin';
import { Observable } from 'rxjs';

import { ListState } from '@integration/list/list.state';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html'
})
export class ListComponent {
  @Select(ListState) public list$: Observable;
  @Select(ListState.hello) public foo: Observable;
  @Select(RouterState.state) public router$: Observable;
}