Integrating react-redux into an existing Angularjs application Integrating react-redux into an existing Angularjs application reactjs reactjs

Integrating react-redux into an existing Angularjs application


  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.


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.