Why you should NEVER use Redux with Angular

Originally published by https://www.stackchief.com

Preface: What is Redux?

Redux is a JavaScript library for managing application state. It was popularized by React because it solved the "extraneous props" issue and played well with flux architecture.

What is the extraneous props issue?

Like Angular, React generates UI components that fall within a “component hierarchy”. Parent components can pass data to child components by way of props. This is similar to how the @Input decorator works in Angular.

While this makes it possible for components to share data, it gets messy when you want to pass data 5-10 levels up or down the component tree. Components end up having “extraneous properties” that create unnecessary relationships with other components. This makes them less reusable.

What is Flux?

Flux is a design pattern popularized by React. It emphasizes unidirectional data flow and proved more performant than the two-way data binding popularized by AngularJS. In fact, the rewrite of Angular was largely influenced by Flux concepts.

Why You Should NOT Use Redux With Angular

While Redux solved a lot of problems with React, it’s use case doesn’t apply to Angular.

React is simply a UI component library. Angular is a highly opinionated framework around dependency injection (DI). This makes it easy to share state out of the box. Services can easily be shared across different component classes....

@Injectable()
export class AppStore {
    userName: “Sam”
    constructor() { }
}

export class Comp1 {
      constructor(store:AppStore){
          this.displayName = store.userName;
      }
}
export class Comp2 {
      constructor(store:AppStore){
          this.userName = store.userName;
      }
}

While you can achieve something similar with React, the easier option is to use Redux.

This is why Redux became so popular with React. It’s the same way other third party libraries (like Axios) became popular with React. These libraries are necessary because React is simply a UI component library.

Just like Redux makes it easier to share state, Axios makes it easier to make Ajax requests.

And just like Angular doesn’t need Axios because of it’s own httpClientModule, it doesn’t need Redux because of things like DI, services, and RxJS…

RxJS and Redux

RxJS is a library for making async requests. It leverages the observable design pattern to bring a reactive pub/sub functionality to Angular.

Using RxJS, Angular components can subscribe to event streams. This allows them to listen for data changes (events) over time.

So what does this have to do with Redux? It turns out Redux implements a similar pub/sub relationship between components and the store. Components subscribe to stores in Redux just like components subscribe to RxJS Observables in Angular.

For these reasons, you can argue that Redux is a redundant addition to Angular because Angular achieves the same behavior using RxJS.

Too Much Boilerplate

Redux works by dispatching defined “actions” that functions called “reducers” interpret to update a centralized “store”. This tends to generate a lot of boilerplate code as your app grows and gets messy fast.

While Angular has its fair share of boilerplate, you don’t need an excuse to add even more. Since using things like RxJS and shared services is a proven alternative, there is no need to further complicate your code base with a bunch of actions and reducers.

Conclusion

The Angular team put a lot of thought into component interaction and shared state. The framework already has everything you need to share state across different components. It’s change detection strategy is super fast out of the box so don’t worry about performance implications of cross-component interaction or immutability and OnPush.

Remember that Redux was an answer to React problems. And just like Angular doesn’t need Axios, it doesn’t need Redux…

Thanks for reading ❤

If you liked this post, share it with all of your programming buddies!