Angularjs with redux

Question

I have been reading some on Redux. Most of what I read is combining redux with react. I use Angularjs. Is there a good reason to use Redux vs just managing state within angularjs scope and allowing angular to manage the bindings

Answer 1

Redux has benefits with Angular 1.x if you have a lot of shared state. In the Angular app I work on we have many pages with a shared model and several components that make (overlapping) changes to that model. It's not always easy to keep that data in sync or to have a standard way for changes to happen. Redux is a nice way to do that, though you could certainly implement something similar just using Angular services. The one-way data flow that Redux uses is easier (in my opinion) to follow than what you normally do in Angular. Conversely, introducing Redux probably hurts your ability to write really quick prototypes, since there's a bit more work to pass data around. That doesn't matter to me, but might matter to others.

The main principles of Redux still apply in Angular apps:

• Single source of truth (single state object). Like I said above, I think it's easier to manage state when it's in a single place versus managed in different Angular scopes or services. Scope-soup is a real problem in some apps.
• State is immutable. This one is where most of the friction with Angular comes in, since Angular (and Javascript) make mutating data really easy. But it does help you write safer code. Since you can only change an immutable object by creating a copy, you can be more confident any data manipulation you're doing in a directive isn't going to break other directives. And conversely, you can expect that other directives aren't making modifications to your data. All of those modifications go through a central place (the single state object, via reducers), so it's easier to find them.
• Changes are made by pure functions. I think this is useful in any JS application. The more code you have that doesn't have a bunch of side effects or framework dependencies, the easier your app is to understand and test. A lot of our tests for Angular code have a bunch of app setup boilerplate. Testing a reducer is incredibly simple by comparison, since it's just a Javascript function.

Using Redux means less of your code is Angular-centric. This means you have an easier upgrade path if you decide to not use Angular. Or even if you just want to migrate to Angular 2. How much easier is hard to say, though.

I don't think there's a ton of overlap due to Angular being more of a framework than a library, but there are things in Redux you can't take as much advantage of in Angular. You might know precisely what part of your app state is changing, but Angular is going run its digest cycle and check everything anyway. Angular 2 is better in that regard, though. You're going to have to jump through some hoops to make all your directives work with immutable data. And especially if you want to send every field a user changes through the Redux store, since ng-model wants to mutate the property you pass it.

Every app is different, but using Redux makes sense in the type of Angular apps I've worked on.