12

I am trying to understand the difference between a standard angular 4 build vs using angular + ngrx?

1
  • ngrx is a reactive library framework that adds provides redux look and feel to your components.
    – Aravind
    Commented Oct 4, 2017 at 14:28

1 Answer 1

35

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.

2
  • 6
    "Here enters RxJs (or NgRx for Angular).". This sounds like ngrx is angular version of rxjs , which is not.
    – Vamshi
    Commented 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.
    – Joe
    Commented Oct 4, 2017 at 14:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.