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:
At this point you should see the router store in the Redux devtools, and you have at your disposal the following query API:
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:
And use it in our component:
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!
Top comments (0)