React
Usando ReactJS in modo Flux

Android CSS firebase HTML JavaScript jQuery meteor Node.js react-native TypeScript
Ricerca…


introduzione

È molto utile utilizzare l'approccio Flux, quando è prevista la crescita dell'applicazione con ReactJS sul frontend, a causa delle strutture limitate e di un po 'di nuovo codice per rendere più facili le modifiche dello stato in fase di esecuzione.

Osservazioni

Flux è l'architettura dell'applicazione che Facebook utilizza per creare applicazioni web lato client. Completa i componenti di visualizzazione composable di React utilizzando un flusso di dati unidirezionale. È più un pattern piuttosto che un framework formale, e puoi iniziare a usare Flux immediatamente senza un sacco di nuovo codice.

Le applicazioni di flusso hanno tre parti principali: il dispatcher , i negozi e le viste (componenti React). Questi non dovrebbero essere confusi con Model-View-Controller. I controller esistono in un'applicazione Flux, ma sono viste del controllore - viste spesso trovate nella parte superiore della gerarchia che recuperano i dati dai negozi e li trasmettono ai loro figli. Inoltre, i creatori di azioni - metodi helper del dispatcher - vengono utilizzati per supportare un'API semantica che descrive tutte le modifiche possibili nell'applicazione. Può essere utile considerarli come una quarta parte del ciclo di aggiornamento di Flux.

Flux evita MVC in favore di un flusso di dati unidirezionale. Quando un utente interagisce con una visualizzazione React, la visualizzazione propaga un'azione attraverso un dispatcher centrale, ai vari negozi che contengono i dati dell'applicazione e la logica aziendale, che aggiorna tutte le viste interessate. Ciò funziona particolarmente bene con lo stile di programmazione dichiarativa di React, che consente allo store di inviare aggiornamenti senza specificare come passare le viste tra stati.

Flusso di dati

Questo è il profilo di una panoramica completa.

Il modello di flusso presuppone l'uso del flusso di dati unidirezionale.

  1. Azione : oggetto semplice che descrive il type azione e altri dati di input.

  2. Dispatcher - ricevitore a singola azione e controller di callback. Immagina che sia l'hub centrale della tua applicazione.

  3. Store : contiene lo stato e la logica dell'applicazione. Registra la richiamata nel dispatcher ed emette un evento da visualizzare quando si è verificata la modifica al livello dati.

  4. Visualizza - Componente React che riceve eventi di modifica e dati dall'archivio. Provoca il re-rendering quando qualcosa è cambiato.

    A partire dal flusso di dati Flux, le viste possono anche creare azioni e passarle al dispatcher per le interazioni dell'utente.

ripristinata

Per renderlo più chiaro, possiamo iniziare dalla fine.

  • I componenti React diversi ( viste ) ottengono i dati da diversi negozi sulle modifiche apportate.

    Poche componenti possono essere chiamate controller-views , perché forniscono il codice della colla per ottenere i dati dai negozi e per passare i dati lungo la catena dei loro discendenti. Le visualizzazioni del controller rappresentano qualsiasi sezione significativa della pagina.

  • Gli store possono essere commentati come callback che mettono a confronto il tipo di azione e altri dati di input per la logica aziendale dell'applicazione.

  • Dispatcher è un contenitore di azioni e ricevitore di azioni comuni.

  • Le azioni non sono altro che semplici oggetti con la proprietà di type richiesta.

    Precedentemente, ti consigliamo di utilizzare le costanti per i tipi di azione e i metodi di supporto (chiamati creatori di azioni ).



Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow