Introduction
Some components must have state. When there is a need for another component to know about that very same state, the first component needs to find a way to communicate that to the other component. There are many ways to achieve this. One way is to ensure that all state that should be shared lives in a centralized store. Think of this store as a single source of truth, from which all components can read. Every state does not necessarily need to end up in the centralized store, as the state may only concern a specific component. Before NgRx and Redux, one way of solving this was to put everything in a globally accessible object or service.
The store, as I mentioned, is just that. It is globally accessible in the sense that it can be injected into any component that might need it.
What is NgRx
NgRx is an implementation of Redux made for Angular, so concepts such as store, action creators, actions, selectors, and reducers are well used.
-
State management with @ngrx/store
-
Handling side effects with @ngrx/effects
-
How to debug with @ngrx/store-devtools
-
How to capture and transform the router state with @ngrx/router-store
NgRx overview
NgRx consists of the following parts:
-
@ngrx/store: This is the core that contains a way for us to maintain state and dispatch actions.
-
@ngrx/effects: This will handle side effects such as, AJAX requests, for example.
-
@ngrx/router-store: This ensures we can integrate NgRx with the Angular routing.
-
@ngrx/store-devtools: This will install a tool that gives us the opportunity to debug NgRx by, for example, giving us a time travel debugging functionality.
-
@ngrx/entity: This is a library that helps us manage record collections.
-
@ngrx/schematics: This is a scaffolder library that helps you when using NgRx.
NgRx Complete Notes
Please click the below link for more details.