Home » Posts tagged "NgRX"

Implementing NgRX 4

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.

Implementing NgRX 4
Photo credit: cfaobam via VisualHunt.com / CC BY

Continue reading “Implementing NgRX 4”

NgRX 4 Actions – Class vs Object Literal

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!

NgRX 4 Actions - Class vs Object Literal
Photo credit: dkobras via Visual hunt / CC BY-SA

Continue reading “NgRX 4 Actions – Class vs Object Literal”

Using NgRX to Cleanly Aggregate Data

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.

Using NgRX to Cleanly Aggregate Data
Photo credit: NASA Goddard Photo and Video via Visualhunt / CC BY

Continue reading “Using NgRX to Cleanly Aggregate Data”

Thinking in JavaScript

Over the last week I’ve gradually come to the realization that the fundamental reason why most people have trouble with JavaScript is because it doesn’t fit their mental model of how programming should be done.  This isn’t to say that most programmers don’t manage to achieve their end goal.  But if you sit back and take an objective look at the code we end up writing, you have to admit, the code ends up being quite ugly.

Now, this isn’t a dig at the way we’ve been doing things.  We’ve all been doing the best we can with what we have.  But, the JavaScript world has progressed and there is a better mental model that has developed and should even be expanded which will allow us to develop more complex and feature rich applications now and well into the future.

Thinking in JavaScript
Photo credit: freddie boy via Visual Hunt / CC BY-SA

Continue reading “Thinking in JavaScript”

How to Upgrade NgRX to 4.x

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.

How to Upgrade NgRX to 4.x
Photo credit: Sean MacEntee via VisualHunt.com / CC BY

Continue reading “How to Upgrade NgRX to 4.x”