Why? What? When? — With NGRX
If you are here, you must be in some problem for which you must have found the solution to State Management. So, we will start with 3 W’s.
- What is NGRX
- When should we use NGRX
- Why should you use NGRX
What is NGRX?
NGRX is a Reactive Extensions for Angular, which can help you to maintain the state for your Angular application.
Confused? Let’s make it easy. Have you ever came up with the problem where your sibling components want to be updated with each other or you want some common data to be shared with all the components or you want to notify the components when there is some change in common data using state management? Oh, so your answer is yes.
So like me, you must have found a common solution of shared service with subject variable or something else. But it was really tough for me to maintain the global state for the big complex application So, here we go with “when we should use NGRX?”
If you have the requirement to maintain the global state and in sync with all the components, then you are right at right place my friend. NGRX is a state management tool that gives you more superpower with Angular to maintain the state for your application.
Let’s get a little bit deeper with the ref.
NGRX
As a reference of the image, you can imagine store as nothing but a big object with key-value pair that stores your data and you are doing nothing just subscribing to that key and whoosh your state management is done! Hell yeah, you don’t need to make global state and manage them now.
Now Question arises why NGRX?
Yes, we do have other libraries like angular redux. Let’s have a comparison between them.
ngrx/store - this is a reimplementation of redux, without compatibility with the existing redux ecosystem. It was built from the ground up with RxJs is mind, types in mind, etc.
At the time they were working on NgRx - the types for redux were pretty bad, but they have come a long way — and there wasn’t as many ‘clean’ ways of exposing the store as an Observable.
angular-redux/store - just how there is ‘React-Redux’ for React bindings to Redux, this is Angular bindings for redux, not a new implementation. It is compatible with most existing Redux midleware/tools that are not react-specific. I really liked how select worked with NgRx - and also bought a similar feature over to Angular-Redux, and also a decorator version of it
So, there is not much comparison to do.
I hope that you’ll like my article, Please appraise me with your feedback.