Managing Your State Navigation Data is a Breeze Using Angular and Akita

The Akita ng-router-store is a neat package offered to Akita users, which enables binding the Angular router state to an Akita store. The benefits of this approach are:

• The router state is stored in an Akita store named router, which serves as the single source of truth for things such as URL, state data parameters, query parameters, etc.
• Our components don’t have to be familiar with the data source. The RouterQuery can be injected in any one of the queries to create an encapsulated derived selector.
• The library exposes Akita style queries, saving you from dealing with all the required boilerplate code.
• We can examine the current router state in the Redux devtools and perform ‘time-traveling’. To get started, install the package and add it, as well as Akita’s devtools module, to the app module:

	import { AkitaNgDevtools } from '@datorama/akita-ngdevtools';
	import { AkitaNgRouterStoreModule } from '@datorama/akita-ng-router-store';
	@NgModule({
	imports: [
	AkitaNgRouterStoreModule.forRoot(),
	environment.production ? [] : [ AkitaNgDevtools.forRoot() ]
	]
	})
	export class AppModule {
	}

view raw 010-01.ts hosted with ❤ by GitHub

At this point you should see the router store in the Redux devtools, and you have at your disposal the following query API:

	import { RouterQuery } from '@datorama/akita-ng-router-store';
	export class ArticlesQuery extends QueryEntity<ArticlesState> {
	constructor(protected store: ArticlesStore,
	private routerQuery: RouterQuery) {
	this.routerQuery.selectParams().subscribe(..);
	this.routerQuery.selectParams('id').subscribe(..);
	this.routerQuery.selectParams(['id', 'parentId']).subscribe(..);
	this.routerQuery.getParams();
	this.routerQuery.selectQueryParams(..).subscribe(..);
	this.routerQuery.getQueryParams();
	this.routerQuery.selectFragment().subscribe(..)
	this.routerQuery.getFragment();
	this.routerQuery.selectData(..).subscribe(..)
	this.routerQuery.getData(..);
	}
	}

view raw 010-02.ts hosted with ❤ by GitHub

For example, let’s say we want to query the current entity based on the URL id parameter, we can do the following in our ArticlesQuery class:

	export class ArticlesQuery extends QueryEntity<ArticlesState> {
	selectArticle$ = this.routerQuery.selectParams('id').pipe(
	switchMap(id => this.selectEntity(id))
	);
	constructor(protected store: ArticlesStore, private routerQuery: RouterQuery) {
	super(store);
	}
	}

view raw 010-03.ts hosted with ❤ by GitHub

And use it in our component:

	@Component({
	template: `<article *ngIf="article$ | async as article">…</article>`
	})
	export class ArticleComponent {
	this.article$ = this.articlesQuery.selectArticle$;
	constructor(private articlesQuery: ArticlesQuery) {}
	}

view raw 010-04.ts hosted with ❤ by GitHub

Voila — easy breezy navigation management!

Last but not least: A new version of Akita just landed in Github! You can check out the breaking changes and the new features here.

Follow me on Medium to read more about Angular, Akita, JS!