I am trying to understand the difference between a standard angular 4 build vs using angular + ngrx?
1 Answer
Are you specificaly talking about ngrx store when you say ngrx?
If so, it's an implementation of Redux specifically for Angular. It might be worth reading through the Redux introduction to get an idea about what it's all about.
Generally, it's a pattern for controlling the state of an application, and the flow of data throughout the appliction.
Take, for example, an angular component. The component MyComponent
loads some data "products". Now, whenever you navagate away from this, as this data (state) it's stored in the MyComponent
it's lost. So we're always reloading it whenever the component is created. Not very efficient, and not great for our impatient user.
And maybe MyOtherComponent
also gets the products! It holds it's list of products. But users can edit the product.name
here. The state has been modified by MyOtherComponent
, without MyComponent
knowing about it - so it's still displaying the old name. We could have each hold a reference to the other, or have the parent get the data - but that's starting to closely couple all our components in a big web. Not good news if we ever want to change anything.
A solution is to inject a service, MyProductsService
that deals with things to do (let's call them actions?) like loadData()
, and stores that state in a central location.
Now, when someone needs it, they ask MyProductsService
for it, and it loads it and provides the data. When someone modifies it they have to go back to MyProductsService
, and it can then... ah. See, how does MyProductService
tell it's dependencies that someone's changed the state? MyProductsService.products
has been updated, but it needs to "push" that change to both MyComponent
and MyOtherComponent
.
Here's where NgRx (RxJS designed for Angular) is useful. It uses the Observable Pattern to manage "pushing" data. When someone want's products
, it's provided as an Observable, and the MyComponents
subscribe to updates. When it changes, the products
observable emits a new value and everyone's happy.
Now, after all this is over you'll have ended up creating something that's starting to look a little like Redux, but it's custom - probably has bugs, untested and you've spent hours and hours on it.
So you can always use the version already written by really clever people and thoroughly tested with helpful tutorials. It follows the best practices, genearlly. The way of interacting with it (mutating state) is very strict, so it prevents unwanted side-effects. The data 'flows' down from the top in a predictable, testable and repeatable way.
-
6"Here enters RxJs (or NgRx for Angular).". This sounds like ngrx is angular version of rxjs , which is not.– VamshiCommented Oct 4, 2017 at 14:47
-
You're right. I was thinking "here's where you need RxJS - or if you're using angular, NgRx" but my wording was terrible. Edited.– JoeCommented Oct 4, 2017 at 14:48
ngrx
is a reactive library framework that adds providesredux
look and feel to your components.