DEV Community

Cover image for Early thoughts on Angular with Redux (NgRx)

Early thoughts on Angular with Redux (NgRx)

Matt Eland on September 01, 2019

I've built a number of single page applications in Angular 2, 4, 6, and now 8 (for some reason I tend to like the even-numbered versions). With 8,...
Collapse
 
hclatomic profile image
HCl Atomic

Angular is 2 way data binding, so the states of the variables are always available in real time without having to code anything. This is the big interest of Angular. And the stores are native in Angular : they are made with a simple native service. Adding Redux to Angular is not only useless, but it will destroy the standard functionning of Angular, and cause a dramatic recoding of the 2 way data binding with monstruous problems to deal with the asynchronism. Please DO NOT do that.

Collapse
 
integerman profile image
Matt Eland

What's your recommendation for handling complex async state changes in Angular?

Collapse
 
hclatomic profile image
HCl Atomic • Edited

Angular is 2 way data binding, so all the changes of all variables are natively watched.

Therefore I make a store with a service, and I call directly this store inside the HTML templates of the component, and so I have no local variable to declare in the current component. The amount of code for each component is drastically lowered.

Any change of a variable in such a store, performed from the typescript or from an input of the HTML template, is automatically applied to all the application (depending upon the module where you imported your store service, see singleton of your store).

Nearly everything is async in Javascript (events, call to server, indexedDB, ....) so Angular is fundamentally designed to deal with this asynchronism. You only need to use the Elvis operator (myvar?.myproperty) for async variables in the template of the component, and initiate your component into a NgOnInit function, or ngAfterViewInit in some case. This is because initiating your component in the constructor will not be suitable with asynchroneous processes (see life cycle). The constructor is just used to import the store service.

All this is working tremendously well, and morever for very rich and complex applications (see for instance oceanvirtuel.eu).

Collapse
 
arielgueta profile image
Ariel Gueta

You should try Akita. github.com/datorama/akita

Collapse
 
integerman profile image
Matt Eland

Thank you! That was not on my radar. It doesn't look (from a quick skim) that it offers the same sort of debugging experience that Redux offers, but it does offer a simplified state management experience that's one step up from manually implementing it in services yourself.

Collapse
 
arielgueta profile image
Ariel Gueta

It does. It comes with Redux devtools (netbasal.gitbook.io/akita/enhancer...) support, and plugins that you will not find in ngrx such as server side pagination, dirty checking, forms manager, etc. If you are coming from .NET this will be more natural to you as it's OOP concepts.