The benefits of using State Management(@ngrx) in nativescript with angular



Hi there, I am new to NativeScript. When I search for about nativescript, I found that most of them told about the benefits of using State Management(@ngrx). But I am not clear what they are saying. So, please somebody share me why I should use (@ngrx) in my NativeScript application. I developed Angular 2.x project without using @ngrx.

Thanks & Best Regards,
Zaw Zaw Naing


I wouldn’t say you should use ngrx with {N}, it’s actually you should use ngrx with Angular. After experiencing it’s benefits, it became a default dependency in my Angular projects either it’s web or {N}.

If you are familiar with Redux, it’s much similar to that. You get a global store where your state / data of your application is managed which is easily accessible throughout app. Without ngrx, you will do the same using services / emitters / subscriptions this may be suitable for small apps but as app grows this can become a pain. It’s where ngrx solves the problem.


I too am a big ngrx fan, but we’ve run into some issues using it with nativescript. I’ve logged the issue here:

Wondering if any other ngrx fans have noticed similar issues in the nativescript context?


I extensively use ngrx in all apps, can you please share what code is exactly causing this issue?


Sure, click on the issue ^^^. I provide a sample app


Of course I do see you have a demo app, but while running locally I was not able see any zone issues which is why I wanted to ask what line of code / action causes the issue?


You don’t get the error? Are you running the same versions as listed in the ticket? What versions if not? Error occurs in iPhoneX 11.4 sim, when you click the Add One button on page1


My CLI version is 4.2.3 (latest), I just cloned your repo and did tns run ios - I’m using iOS 11.4 only but the issue was not reproduced.


Ah, I know what it is. The latest version included the workarounds. I reinstated the error on master, so if you pull latest, you should see the error again. Sorry about the confusion.


I do use lazy loaded modules, feature stores and still dispatch actions and reload data etc., in similar way but I never hit this issue.

I guess the reason you do is that you are accessing feature store of another lazy loaded module in page module, it doesn’t have a feature store itself. May be if you extend a feature store from home store and inject that in page component, it might fix this. Or if ngOnInit works for you then it’s still better.