Integrating react-redux into an existing Angularjs application

Question

I'm considering integrating react-redux into a 3 years old codebase of Angularjs. I don't wish to refactor the all codebase at once, rather incrementally introducing react-redux through new features which my team will develop.

1. Is there any best practices doing so? (any resources will be appreciated)
2. Can an old feature (written in ng) contain react-redux parts or I'll have to rewrite it?
3. How can I avoid doing the same API calls? (if both need the same resource)
4. Should I avoid the change all together?

Answer 1

1. I don't know of any specific best practice, but I recently started using ng-redux (https://github.com/angular-redux/ng-redux) in my current Angular 1.5 app to great effect so far. It's been really nice for gaining the benefits of uni-directional data flow and structured state management from Redux while still maintaining the Angular core. This will also let you migrate over gradually, one entity model at a time. Although I haven't used it myself, I see that https://github.com/ngReact/ngReact is available for wrapping React components in Angular directives. If you're looking to eventually get to fully using react-redux standalone, that could be a good stepping stone.
2. There was some refactoring required to integrate ng-redux into existing features, but if you're already maintaining models for your data outside controllers, it isn't too bad. Ng-redux lets you call Action Creator functions directly from your controller, which will typically replace UI action event handlers.
3. You can easily make your API calls using Async Actions with redux-thunk when using ng-redux. You can just use existing Angular services to request out to your API, and then use the response to dispatch a standard Action to update state.
4. I'd say it's definitely worth it to at least integrate ng-redux for standardizing the data flow of your app. It will help organize your project better, and might improve performance depending on how you refactor. The benefit of ngReact is less clear to me though, unless you are looking to slowly convert components until you can ditch the Angular core entirely.

Answer 2

I've successfully migrated the application under the brown-field limitations I pointed out at the original question.

The solution is based on two approaches:

1. Small Components - are components that are pretty much contained. For example, notifications dropdown.
2. Entire part of the App that I can't migrate yet - basically some routes/views that are still written in Angular.

Both approached use a similar technique to the one which suggested here: http://softeng.oicr.on.ca/chang_wang/2017/04/17/Using-AngularJS-components-directives-in-React/?utm_source=reactnl&utm_medium=email

TIP: It's much more easier if your Angular dependencies are managed properly.