Migrating from NGRX to NGXS in Angular 6
How do you eat an elephant?
Disclaimer
If you’re not familiar with modern state management tools this article will probably not be the best place to start. This article assumes that you have done your research on both NGRX and NGXS and are just looking for a guide to migrate things over. I will mention comparison points when relevant, but that is not the purpose of this guide. So, with that disclaimer out of the way, let’s begin!
In order to understand what work will need to be done to migrate from one library to another it may be helpful to see a diagram about how things will map from one to another. Let’s see a quick breakdown of the anatomy of each library.
As you can see there is a lot of overlap here. The key differences are handling side-effects, the use of decorators, and state mutations. In NGRX those are handled separately in reducers for state change, and effects for handling side-effects. NGXS combines that together inside the “State” class. Which is a better method in my opinion. Also, the way NGXS utilizes TypeScript decorators really cleans up the code base and makes it feel like Angular. There are several other differences as well but these are the main ones.
One way to think about refactoring is to think about the how you would start something from…
