Do you know when to use state management in Angular?

Last updated by Brook Jeynes [SSW] 6 months ago.See history

State management in Angular can quickly become unmaintainable if done incorrectly. It is important to fully understand why you are implementing state management and then decide how you are going to do it.

There are many different options you can choose from, including the following:

State managed in parent-child component hierarchies

In this method, components do not know about the state of other components but rather receive data via inputs and emit data via events. It works well for simple scenarios but falls over when lots of communication is required between different components.

Pros:

  • Simplicity - Out of the box

Cons:

  • Communication - No shared state across component trees
  • Scalability - When the depth of hierarchies grows, it becomes hard to deal with
  • Separation of concerns - Tight coupling between components in the tree
  • Testability - You cannot properly unit test parent-child components

State management in observable services

Using observable services takes state management to the next level. Using this method, we can enable communication between different component trees. This solution is suitable for most scenarios.

Pros:

  • Sharing state - You can pass state between different component trees
  • Ease of use - Quick and easy to implement
  • Separation of concerns - Keeps business logic away from the presentation logic

Cons:

  • Scalability - Services can become a web of dependencies if not kept in check
  • Predictability - Consistency is not enforced in the way state is managed
  • Testability - It can be hard to test services due to the inherent dependency web

Redux e.g. NgRx (see rule: https://www.ssw.com.au/rules/use-ngrx-on-complex-applications)

Redux is a design pattern which centralizes the state into a single shared store across the application. It introduces several constraints on how data flows in and out of the state store in order to make the state scalable and consistent. However, it requires a lot more code and can lead to longer development times. Often this makes sense for large, complicated applications but less so for simple ones.

Pros:

  • Centralized state - Makes global state management simpler
  • Separation of concerns - Goes one step further by separating business logic and state management
  • Predictability - Makes state change predictable by enforcing consistecy
  • Testability - Pure functions are much easier to test as they have no external dependencies

Cons:

  • Velocity - It can take more code to write
  • Boilerplate - Requires the use of many files and has a lot of repetition
  • Learning curve - Can be easy to get wrong if you are an inexperienced user
  • Third-party library - Not part of the standard Angular library may increase overhead when upgrading Angular. Also introduces additional bundles in the published artifact.
We open source. Powered by GitHub