Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the difference between standard angular and angular + ngrx?

Tags:

angular

ngrx

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

like image 774
CW1 Avatar asked Oct 04 '17 14:10

CW1


People also ask

Is it necessary to use NgRx in Angular?

NgRx is a popular solution in the Angular ecosystem if you are building complex web applications with sophisticated state management. Characteristics of the need for NgRx are many user interactions and multiple data sources. NgRx is a good choice, if: the state should be accessed by many components and services.

Is NgRx and RxJS are same?

Ngrx is a group of Angular libraries for reactive extensions. Ngrx/Store implements the Redux pattern using the well-known RxJS observables of Angular 2. It provides several advantages by simplifying your application state to plain objects, enforcing unidirectional data flow, and more.

Is NgRx part of Angular?

NgRx is a framework for building reactive applications in Angular. NgRx is inspired by the Redux pattern - unifying the events in your application and deriving state using RxJS. At a high level, NgRx stores a single state and uses actions to express state changes.

What is the difference between NgRx and NGXS?

As I have already mentioned, NGXS is a state management library which is very similar to NGRX, with the difference that it has less boilerplate code and is easier to learn. There are 4 basic concepts in NGXS that you should understand before you integrate it into your project.


1 Answers

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.

like image 102
Joe Avatar answered Oct 17 '22 08:10

Joe