There seems to be a lot of confusion about Implement NgRX 4 in an Angular application. Some of it I’ve contributed to because NgRX 2 isn’t quite the same as NgRX 4 and as I’ve transitioned, I’ve learned better ways. In other words, I was wrong and I’m correcting my mistake! Below is the correct, NgRX approved way, of implementing NgRX 4.
If you are looking for information about how to convert to NgRX 4 from NgRX 2, you can visit my previous article, How to Upgrade to NgRX 4.
Before we get started, make sure you have TypeScript 2.4.x or above installed in your local project. The CLI may complain, depending on what version of it you are using. But, NgRX 4 requires us to use TypeScript 2.4.x. You should also have RxJS 5.4.x or above installed.
You will also need to install @ngrx. You can do this using the following NPM command:
npm install --save @ngrx/store @ngrx/effects
And finally, I’ve found that I need to use the –aot switch both when I’m using production and development builds, so you’ll want to add that to your scripts in your package.json file.
When NgRX 4 came out and I discovered that the “right” way of creating Actions is to use TypeScript classes and not Object Literals, I was a bit surprised. Why would you use a Class that requires you to use the “new” keyword? Why would you put multiple classes in one file? This is insane!
For the last 18 months, I’ve been working for an organization that has what some might consider a unique requirement. Because of where our application’s data is sourced, we need to aggregate data on the client side rather than on the server. What this means is that for any one screen, we may make multiple calls to the server to grab all the data we need. Fortunately, because we adopted NgRX early in our adoption of Angular, we could avoid a lot of the headaches associated with client-side aggregation.
This week, I discovered that NgRX 4 had released. Yeah, we skipped over version 3 here too to get in sync with the Angular version numbering.
There is a pretty complete upgrade guide that you can find here. But, the upgrade guide assumes that you are creating Actions by instantiating a new Action object rather than returning a literal as I’ve been instructing.
So, in this week’s post, I plan to cover the exact steps I recommend going through to upgrade to NgRX 4, why I don’t think instantiating an Action if the right way to create new actions, and some possible enhancements you can make once you’ve upgraded to the new version.