2015-12-10 47 views
5

Capisco che ho bisogno di un dispatcher emit.change(), per far sapere a tutti i componenti che qualcosa è cambiato all'interno del negozio. Ma non capisco perché ho bisogno di inviare azioni piuttosto che chiamare negozi direttamente dall'interno delle azioni,React/Flux - Perché ho bisogno di un action-dispatcher?

.i.e. perché dovrei fare questo:

var Dispatcher = require('dispatcher'); 
var MyActions = { 
    addItem: function(item){ 
     Dispatcher.dispatch({ 
       action: 'ADD_ITEM', 
       payload: item  
     }) 
    } 
} 

piuttosto che questo:

var MyStore = require('mystore'); 
var MyActions = { 
    addItem: function(item){ 
     MyStore.addItem(item); 
    } 
} 

E 'per il caso che più negozi ascoltano lo stesso evento, per esempio quando StoreA e StoreB ascoltare ADD_ITEM pure?

risposta

9

Il dispatcher attiva le azioni una per una, quando vengono chiamate. È necessario un dispatcher perché:

  1. Si desidera che lo stato dell'applicazione venga modificato atomicamente. Il che significa, s1-> s2 (a1), s2-> s3 (a2) in modo sincrono. Piuttosto che s1-> s3 (a causa di a1 e a2). Se non lo fai, dovrai preoccuparti di altre azioni attivate insieme a questa particolare azione e indovina come cambierà lo stato dell'applicazione per tutte quelle combinazioni. Qui è dove si scatena l'inferno e il tuo codice diventerà troppo difficile da mantenere. Immagina di scrivere un blocco if-else nello store per ogni azione attivata, per verificare se sono attive anche altre azioni. Il dispatcher si assicura che non invii già dispatching. Una spedizione alla volta. Mantiene il tuo albero stato molto sano.

  2. Inoltre il dispatcher mantiene una serie di callback da attivare per ogni 'azione'. Questo è utile per richiamare callback su più negozi per la stessa azione. Quando un negozio si iscrive a un'azione (utilizzando register), il dispatcher aggiunge il RegisterHandler ad esso associato e lo aggiunge a un array. Con l'aiuto di questo, puoi registrare/annullare la registrazione dei tuoi negozi quando ne hai bisogno. E a seconda del tipo di azione, è possibile apportare modifiche di conseguenza a tutti i negozi registrati. Se non si utilizza un dispatcher, si dovrà preoccupare di tutti i negozi che devono essere avvisati, quando si scrive la parte di azione. Cattivo!

  3. Con questo tipo di approccio, l'unica cosa su cui devi concentrarti è colpire il dispatcher con un'azione. Il resto è fino al dispatcher che notifica tutti i negozi che hanno bisogno di change in base all'azione. Poiché i negozi hanno callback che attivano le viste, tali callback possono essere chiamati come e quando necessario. Ciò mantiene il tuo codice molto modulare.

+0

Grazie per l'ottima risposta! Ho un'altra domanda relativa a questo, ed è per questo che sono arrivato a questa domanda qui in primo luogo. Devo restituire un valore (l'ID di un elemento appena creato) da un'azione e passarlo all'azione successiva. Devo spedire la prossima azione incluso l'ID da un punto vendita piuttosto che inviare più azioni dopo l'altra? L'altra domanda è [qui] (http://stackoverflow.com/questions/33987477/react-flux-return-value-from-flux-dispatcher-store) –

+0

La cosa migliore da fare sarebbe utilizzare la stessa azione e ascoltare su entrambi i negozi e apportare le modifiche di conseguenza. In realtà, c'è sempre un modo per farlo. Devi solo modificare leggermente il tuo codice. Disponi con questo {data_for_store1: {...}, data_for_store2: {...}, azione: 'ADD_ITEM'} ed entrambi i negozi possono ora utilizzare la stessa azione. questo aiuta? –

+0

Inizialmente era ciò che stavo facendo, ma action1 crea un nuovo ID in StoreA e devo passare in qualche modo l'ID appena creato a StoreB.Questo può essere fatto modificando il dispatcher, in modo che possa restituire i valori dopo la spedizione? –