What is NGRX?
NgRx is group of angular libraries for reacitve extension. It use Redux pattern using well knows RxJS Observable of Angular2. it provide severals advantage by simplifying your app state to plain objects, enforcing unidirectional data flow.
Store:
The store can be seen as your client side database but, more importantly, it reflects the state of your application. You can see it as the single source of truth. It is only thing you alter when follow the Redux pattern and you modify by dispatching actions to it.
Reducer:
Reducers are the functions that know what to do with a given action and the previous state of your app. Reducer will take previous state from store and apply pure function to it. Pure means the function always return the same value for same input and that it has no side effects. From the result of that pure function, you will have new state that will be put in your store.
Actions:
Actions are the payload that contains needed information to alter your store. Basically, an action has a type and a payload that your reducer function will take to alter the state.
Dispatcher:
Dispatchers are simply an entry points for you to dispatch your action. In NgRx, there is a dispatch method directly on the store.
Middlerware:
Middleware are some functions that will intercept each action that is being dispatched in order tto create side effect, even though you will not use them in this article, they are implemented in NgRx/Effect library, and there is a big chance that you will need them while building real-world applications.
States
Shared: state that is accessed by many components and services.
Hydrated: State that is persisted and rehydrated from external storage.
Available : State that need to be available when re entering routes.
Retrieved : state that must be retrieved with side effects.
