React & Firebase + Flux: Untergeordnete Komponente wird nicht gerendert

Question

Ich habe dies bereits überprüft SO article, aber die Lösung funktioniert nicht. Ich habe eine einfache Messaging-Anwendung unter Verwendung von Firebase + Flux:

App 
-UserList Component (sidebar) 
-MessageList Component 

Die Userlist Komponente Requisiten von this.state.threads (Zustand gehört zur Haupt App-Komponente) bekommt.

In meinem Flux ThreadStore, ich habe folgenden Ereignis-Listener auf eine firebaseRef gebunden:

const _firebaseThreadAdded = (snapshot) => { 
    threadsRef.child(snapshot.key()).on('value', (snap) => { 
     console.log('thread added to firebase'); 
     _threads.push({ 
      key: snap.key(), 
      threadType: snap.val().threadType, 
      data: snap.val()}); 
    }); 
} 

ref.child(ref.getAuth().uid).child('threads').on('child_added', Actions.firebaseThreadAdded); 

Die Userlist verwendet this.props.threads.map(thread => { return(<li>{thread.name}</li>) }) (zusammengefasst), um dann eine Liste der Threadnamen in der Seitenleiste auf der Grundlage des Faden zu machen Schlüssel in der firebaseRef/userId/threads.

Doch diese machen keine Liste der Benutzer , bis ich in der App eine beliebige Taste klicken oder einen Verweis direkt von der Benutzeroberfläche Firebase Forge löschen (Ich habe auch eine ‚child_removed‘ Ereignis-Listener).

Für das Leben von mir kann ich das nicht herausfinden. Kann jemand erklären, warum das passiert/wie man es repariert? Ich habe einen ganzen halben Tag damit verbracht, es zu versuchen und habe mir nichts einfallen lassen.

FYI:

1. Relevante Dispatcher.register Eintrag:

   case actionConstants.FIREBASE_THREAD_ADDED: 
        _firebaseThreadAdded(action.data); 
        threadStore.emitChange(); 
        break; 
   

2. Relevante Aktionen Eintrag:

   firebaseThreadAdded(data) { 
       AppDispatcher.handleAction({ 
        actionType: actions.FIREBASE_THREAD_ADDED, data 
       }); 
   }, 
   

Answer 1

Okay, so habe ich es nach einer aus viel lesen - ein wenig neu für Flux . Die Frage war hier:

case actionConstants.FIREBASE_THREAD_ADDED: 
     _firebaseThreadAdded(action.data); 
     threadStore.emitChange(); 
     break; 

Die emitChange() Aktion ausgelöst wurde, bevor die Firebase Versprechen gelöst wurde, und damit auch die untergeordneten Komponenten wurden Aktualisierung hte Zustand ohne Daten. Daher wurde die Liste nicht gerendert. Was ich tat, das war erneut Architekt die Funktion zu ändern, so dass threadStore.emitChange() nur auf Entschlossenheit ausgelöst werden würde:

const _firebaseThreadAdded = (snapshot) => { 
    threadsRef.child(snapshot.key()).once('value').then(snap => { 
     console.log('thread added to firebase: ', snap.key()); 
     _threads.push({ 
      threadId: snap.key(), 
      threadType: snap.val().threadType, 
      data: snap.val()}); 
     threadStore.emitChange(); 
    }); 
} 

und der daraus resultierenden Dispatcher Registereintrag:

case actionConstants.FIREBASE_THREAD_ADDED: 
      _firebaseThreadAdded(action.data); 
      break; 

Sie wissen nicht, ob dies Der beste Weg, um dies zu handhaben, aber es macht den Job - das Emit-Ereignis wird nur ausgelöst, sobald Firebase geladen hat. Hoffe das hilft jedem mit einem ähnlichen Problem für Versprechungen/Firebase/Ajax!