Integrazione di react-redux in un'applicazione Angularjs esistente

Question

Sto considerando l'integrazione di react-redux in una base di codice di 3 anni di Angularjs. Non desidero riorganizzare tutti i codebase in una sola volta, introducendo piuttosto gradualmente la reazione-redux attraverso le nuove funzionalità sviluppate dal mio team.

1. Esiste qualche procedura ottimale? (eventuali risorse saranno apprezzate)
2. Una vecchia caratteristica (scritta in ng) contiene parti react-redux o dovrò riscriverlo?
3. Come posso evitare di fare le stesse chiamate API? (se entrambi hanno bisogno della stessa risorsa)
4. Devo evitare il cambiamento tutti insieme?

Answer 1

ho successo migrato l'applicazione sotto la marrone-campo limitazioni ho fatto notare alla domanda iniziale.

La soluzione si basa su due approcci:

1. Piccoli Componenti - sono componenti che sono più o meno contenuti. Ad esempio, dropdown delle notifiche.
2. Tutta la parte dell'App che non riesco ancora a migrare - fondamentalmente alcune rotte/viste che sono ancora scritte in Angular.

Entrambi avvicinato uso una tecnica simile a quella che ha suggerito qui: http://softeng.oicr.on.ca/chang_wang/2017/04/17/Using-AngularJS-components-directives-in-React/?utm_source=reactnl&utm_medium=email

SUGGERIMENTO: E 'molto più facile se le dipendenze angolari vengono gestiti correttamente.

Answer 2

1. Non so di alcun migliori pratiche specifiche, ma di recente ho iniziato ad usare ng-redux (https://github.com/angular-redux/ng-redux) nel mio attuale angolare 1,5 app di grande effetto finora. È stato davvero bello ottenere i benefici del flusso di dati unidirezionale e della gestione dello stato strutturato da Redux mantenendo il core angolare. Questo ti permetterà anche di migrare gradualmente, un modello di entità alla volta. Anche se non l'ho usato da solo, vedo che https://github.com/ngReact/ngReact è disponibile per il wrapping dei componenti React nelle direttive Angular. Se stai cercando di utilizzare completamente il react-redux standalone, potrebbe essere un buon trampolino di lancio.
2. È stato necessario eseguire alcuni refactoring per integrare ng-redux in funzionalità esistenti, ma se si stanno già mantenendo i modelli per i dati al di fuori dei controller, non è male. Ng-redux ti consente di chiamare le funzioni di Action Creator direttamente dal tuo controller, che in genere rimpiazzerà i gestori di eventi di azioni dell'interfaccia utente.
3. È possibile effettuare facilmente le chiamate API utilizzando Async Actions con redux-thunk quando si utilizza ng-redux. Puoi semplicemente utilizzare i servizi angolari esistenti per richiedere la tua API e quindi utilizzare la risposta per inviare un'azione standard per aggiornare lo stato.
4. Direi che valga la pena di integrare almeno ng-redux per standardizzare il flusso di dati della tua app. Aiuterà a organizzare meglio il tuo progetto e potrebbe migliorare le prestazioni a seconda del tuo refactoring. Il vantaggio di ngReact è per me meno chiaro, a meno che non si stia cercando di convertire lentamente i componenti fino a quando non si può abbandonare completamente il nucleo angolare.