Using NgRx for state management in Angular
NgRx is a framework for building reactive applications with Angular, inspired by Redux. The following diagram from the NgRx docs provides a more visual overview of the key components of NgRx:
Figure 6.4: NgRx overview
With NgRx, we can do the following:
- Define the global and local stores
- Write side effects for handling async operations
- Dispatch actions
- Define reducers as pure functions for predictable state changes
- Write selectors for more granular control over the state
- Carry out time-travel debugging
- Normalize entity data
- Integrate with Angular router state
- Create a reactive store with Signals support
Now that we have a high overview of NgRx, let’s dive into a practical example of how we can deal with state management challenges.
Important note
At the time of writing this recipe, the latest Angular and NgRx versions were v18. In the...
