NgRx State

NgRx State consists of the following:

• @ngrx/store
• @ngrx/effects
• @ngrx/router-state
• @ngrx/entity
• @ngrx/component-store

We will have a detailed look into each of them. For now, let’s understand the five main components which you will frequently see in the NgRx application.

• The store holds all the states of an application.
• An action is a unique event that is dispatched from components or services that tells NgRx how the state of an app should be changed.
• Reducer is where the actual state of the application changes. Reducer responds to the dispatched action and based on that action, it creates a new immutable state and passes it to the store.
• A selector is used to retrieve data from the store.
• The effect is the RxJS-powered side effect model for Store. Effect listens to the dispatched action and if it is configured to do something it will perform it (for example, API requests, web socket messages, and time-based events).

Note: All Actions that are dispatched within an application state are always first processed by the Reducers before being handled by the Effects of the application state.

These are just brief introductions we will use all these in our application.