Photo by Jaye Haych on Unsplash

There are a few primary ways to manage state in Angular. You can manage state with purely Angular mechanisms, services and Observable subjects, or use a state management library such as NgRx Store. NgRx Store is commonly used for application-wide shared state and uses the following guidelines for determining what goes in the global store, known as the S.H.A.R.I principle.

Shared: state that is accessed by many components and services.

Hydrated: state that is persisted and rehydrated from external storage.

Available: state that needs to be available when re-entering routes.

Retrieved: state that must be retrieved with a side-effect.

Impacted: state that is impacted by actions from other sources.

There may have been some scenarios where you used NgRx Store as a convenient pattern for state that only needed to be managed locally. In NgRx, we've introduced the ComponentStore library to solve this use case.

NgRx ComponentStore is a stand-alone library that helps to manage local/component state. It's an alternative to reactive push-based "Service with a Subject" approach. So how do you go from one to the other? This video walks through removing some state from the global store and managing it locally, using the NgRx books app as an example.

If you found this post helpful, click the ❤️ so other people will see it. You can also subscribe to my YouTube channel for more NgRx and Angular content!