NgRx : Solution to State Management using Angular

Fig 1.1. NgRx Store Architecture in Angular

What is NgRx?
NgRx is a Reactive State Management for Angular inspired by Redux. It provides a perfect library support for the following features:
• Manages global and local state across application to improve performance.
• Isolates side effects from components by connecting observables of action to store.

Here, we are mainly focusing on the “State” NgRx packages such as
• Store : Global state management in application.
• Effects : Side effect model for @ngrx/store.
• Entity : To manage record collections and perform query operations like add, update, delete, upsert.

There are others important components as well to the @ngrx/store which are used:

• Actions : They are the main building block in Redux architecture, which are uniquely defined throughout the application. They are mainly used when dispatching an action to the store.
  The metadata we need to perform for the action are provided in the props<>. The props we pass in the action are passed to the reducers via dispatcher.

Action Creator Template

• Dispatcher : It is function exposed by the Store<> to emit an action to store to perform. This is called to emit an action to the reducer to perform the action.

• Reducers : They are responsible for handling the operation on the current store state based on the action dispatched. Reducers are pure function (same output for the same input). They create new state for the store based on the original state and the action.

• Selectors : They are pure functions which are used for selecting slices of store state. When selecting slices of state, it provided the following features: Memoization, Type Safety, Testability, Composition, Portability.
  It also keeps track of the latest arguments in which the selectors slice was invoked. The last result can be returned when the same arguments are passed as last one without invoking the heavy computation. This provides improved performance using memoization.

• Effects : They are used to handle side effects for store which are dependent on the HTTP requests (time-based events). They are useful for handling long-running tasks and running in background.
  - They can perform new Action to the Reducer based on the HTTP response with an option to dispatch the action or not.
  Reference : https://www.concretepage.com/ngrx/ngrx-effects-example