Is Redux dead? 3 ways to use redux in your Angular app

Share on facebook
Share on google
Share on twitter
Share on linkedin

Using Redux in React apps has become the industry standard for building scalable React apps, but with Angular, it is not so obvious when to use Redux because Angular already provides services, which can manage state.

Through my work with clients I have come up with the three ways I see Redux is used with Angular:

  • Hybrid reactive app: Use Angular services for most of the state management, but use Redux for certain use cases such as 1 to many communication and undo functionality.
  • Pure reactive app with commands and events: Use Redux for all state management and update the store with commands as well as events.
  • Pure reactive app with events: Use Redux for all state management, update the app state by calling service methods and update store on events.

Hybrid reactive app

This is my recommended starting point for an application. Redux does add complexity and should only be applied to fix the pain of state management in a big application.

The idea is to not to introduce Redux in the application at all until the application has become hard to manage without. Reasons for introducing Redux includes:

  1. A lot of 1 to many communication, where Redux helps by centralizing the state that other components can subscribe to.
  2. Deep component nesting and change detection optimization with onPush, where components can’t get state directly from a service nor trough input and output and instead need to subscribe to state changes and trigger change detection for the component either by using the async pipe or .markForCheck in the subscription.
  3. Undo/redo functionality, as this can easily be implemented with the state in the Redux store.
  4. Query param synchronization with the store. I will write a post about this later.
  5. Caching with the store, as Redux can save you from cluttering your business logic with caching code and do more aspect-oriented programming.
  6. Use it for logging middleware on certain events, such as HTTP requests.

Pure reactive app with commands and events

This pattern is similar to the CQRS pattern as it contains commands that trigger some modification of the app state, that are separated from the reading (query) of the app state. These commands can have side effects, which are events, that also causes changes to the app state.

With this pattern the business logic is typically in the reducers and/or epics (reducers that causes events to be triggered instead of causing state changes directly). This is a typical setup for React apps to use this pattern but for Angular apps, I prefer to avoid using commands with Angular as I find it complicates the control flow and instead I prefer calling service methods for state changes and hence use services for encapsulating business logic.

In this sequence diagram we see that fetchData (command) is getting dispatched to an epic to fetch data, which will do the fetching and after this dispatch the event fetchDataChanged.

Pure reactive app with events

As the application has scaled to a considerable size and matches some of the use cases above, this is the Redux pattern I will recommend. With this pattern, the components and services are completely stateless and all state will be contained in the Redux store. The state is changed by calling service methods that dispatch events as side effects, which will change the app state.

In this sequence diagram we see that fetchData (service method) is getting called on a service to fetch data, which will do the fetching and after this dispatch the event fetchDataChanged. Notice how this flow is simpler than the flow with commands because of less indirection and easier control flow of the code.

Conclusion

We went through three ways to use Redux in your Angular app. My recommendation was to start with the hybrid solution and when the app has scaled to a considerable size, migrate to a pure reactive app with events and use services for encapsulating business logic and controlling state changes.

Do you want to become an Angular architect? Check out Angular Architect Accelerator.

Related Posts and Comments

How to Set up a CI pipeline with Azure Pipelines and Nx

It goes without saying that having a CI pipeline for your Angular apps is a must. Setting one up for regular Angular apps is fairly straightforward but when you have an Nx monorepo there are certain other challenges that you have to overcome to successfully orchestrate a “build once, deploy many” pipeline. This post will

Read More »

How to Set Up Git Hooks in an Nx Repo

Git hooks can be used to automate tasks in your development workflow. The earlier a bug is discovered, the cheaper it is to fix (and the less impact it has). Therefore it can be helpful to run tasks such as linting, formatting, and tests when you are e.g. committing and pushing your code, so any

Read More »

The Stages of an Angular Architecture with Nx

Long gone are the times when the frontend was just a dumb static website. Frontend apps have gotten increasingly complex since the rise of single-page application frameworks like Angular. It comes with the price of increased complexity and the ever-changing frontend landscape requires you to have an architecture that allows you to scale and adapt

Read More »

The Best Way to Use Signals in Angular Apps

Since Angular 16, Angular now has experimental support for signals and there is a lot of confusion in the community about whether this is going to replace RxJS or how it should be used in an app in combination with RxJS. This blog post sheds some light on what I think is the best way

Read More »

High ROI Testing with Cypress Component Testing

Testing is one of the most struggled topics in Angular development and many developers are either giving up testing altogether or applying inefficient testing practices consuming all their precious time while giving few results in return. This blog post will change all this as we will cover how I overcame these struggles the hard way

Read More »

Supabase and Angular: A Powerful Combination for Building Web Applications

Supabase is a cloud-based backend as a service (BaaS) platform that provides developers with a set of tools and services for building scalable and secure web applications.It’s much like Firebase but Supabase provides a PostgreSQL database which solves some of the inconveniences with a NoSQL database such as Firestore.For that reason, Supabase has now become

Read More »