Integrando react-redux en una aplicación Angularjs existente

reactjs refactoring

Question

Estoy considerando integrar react-redux en una base de código de Angularjs de 3 años. No deseo refactorizar toda la base de código de una sola vez, sino que de forma incremental introducir react-redux a través de las nuevas funciones que mi equipo desarrollará.

1. ¿Hay algunas mejores prácticas para hacerlo? (cualquier recurso será apreciado)
2. ¿Puede una función antigua (escrita en ng) contener partes react-redux o tendré que reescribirla?
3. ¿Cómo puedo evitar hacer las mismas llamadas a la API? (si ambos necesitan el mismo recurso)
4. ¿Debo evitar el cambio todos juntos?

Answer 1

1. No conozco ninguna práctica recomendada específica, pero recientemente comencé a usar ng-redux ( https://github.com/angular-redux/ng-redux ) en mi aplicación Angular 1.5 actual hasta el momento. Ha sido muy bueno para obtener los beneficios del flujo de datos unidireccional y la administración de estado estructurado de Redux mientras se mantiene el núcleo angular. Esto también le permitirá migrar gradualmente, un modelo de entidad a la vez. Aunque no lo he usado yo mismo, veo que https://github.com/ngReact/ngReact está disponible para envolver los componentes React en directivas angulares. Si estás buscando eventualmente llegar a usar completamente react-redux, eso podría ser un buen trampolín.
2. Se requirió una refactorización para integrar ng-redux en las características existentes, pero si ya está manteniendo modelos para sus datos fuera de los controladores, no es tan malo. Ng-redux le permite llamar a las funciones del Creador de acciones directamente desde su controlador, que normalmente reemplazará a los manejadores de eventos de acción UI.
3. Puede hacer fácilmente sus llamadas a la API usando acciones asincrónicas con redux-thunk cuando usa ng-redux. Puede utilizar los servicios angulares existentes para solicitar su API y luego usar la respuesta para enviar un estado estándar de acción para actualizar.
4. Diría que definitivamente vale la pena integrar al menos ng-redux para estandarizar el flujo de datos de su aplicación. Ayudará a organizar mejor su proyecto y podría mejorar el rendimiento según cómo se refactorice. El beneficio de ngReact es menos claro para mí, a menos que esté buscando convertir lentamente los componentes hasta que pueda deshacerse por completo del núcleo angular.

Answer 2

He migrado con éxito la aplicación bajo las limitaciones de campo marrón que señalé en la pregunta original.

La solución se basa en dos enfoques:

1. Componentes pequeños: son componentes que están prácticamente contenidos. Por ejemplo, lista desplegable de notificaciones.
2. Parte completa de la aplicación que aún no puedo migrar: básicamente, algunas rutas / vistas que todavía están escritas en Angular.

Ambos se acercaron a utilizar una técnica similar a la que se sugiere aquí: http://softeng.oicr.on.ca/chang_wang/2017/04/17/Using-AngularJS-components-directives-in-React/?utm_source=reactnl&utm_medium= correo electrónico

SUGERENCIA: es mucho más fácil si sus dependencias angulares se gestionan correctamente.