Differences between ngrx and angular-redux

If you’ve decided to use Redux in your Angular application, you’ve no doubt researched the differences between these two implementations. I’ll go over my findings and it should be obvious which library I decided to use.

Similarities

Both libraries espouse the “standard” parts needed to implement Redux like reducers, actions, and stores. Both embrace the use of smart components to access the store and then passing down data from the smart component to dumb components as inputs. Both work with (different) chrome extensions to view and edit state.

Differences

The main difference is in how a smart component accesses store properties. Both of them provide a “select” method but their usages are different.

Ngrx encourages using the select method in the component constructor (or similar event):

Angular-redux has a decorator select method that ends up looking cleaner:

If you don’t pass a parameter to the select method, it will try to find a property that matches your variable name (just like how destructuring works).

The other difference is that ngrx doesn’t support middleware while angular-redux does. There is a big community around Redux, meaning there is a lot of middleware available, so this is something to consider.