ReactJS + Flux - Wie Toasts/Benachrichtigungen implementieren?

Question

Ich versuche, Flux und Reactjs zu verstehen.

Betrachten Sie ein folgendes, sehr einfaches Szenario:

Sie ein Formular mit wenigen Eingaben haben. Wenn Benutzer Formular sendet,

ActionCreator.publishAnnouncement(this.state.announcement); 

wird innerhalb meiner Formularkomponente aufgerufen. Dies ist, wie die publishAnnouncement Methode wie folgt aussieht:

var publishAnnouncement = function (announcement) { 
    AnnouncementAPI.publishAnnouncement(
    announcement, 
    successCallback, 
    failureCallback 
) 
}; 

AnnouncementAPI auf einen AJAX http POST Aufruf nur ein Wrapper ist. Es dauert zwei Rückrufe - auf Erfolg und auf Misserfolg.

Und jetzt: Ich muss eine Benachrichtigung/Toast auf dem Bildschirm anzeigen - zeigt Erfolg oder Misserfolg. Wie würden Sie das auf Flux-Art machen?

Ich habe darüber nachgedacht, Benachrichtigungskomponente zu erstellen und es in meinem Formular zu rendern. wie folgt aus:

<Notification title={this.state.notification.title} message={this.state.notification.title} visible={this.state.notification.visibility} // ?? onTimeExceeded ??  /> 

Aber wie gehe ich diese Rückrufe? Soll ich NotificationStore erstellen, der auf ANNOUNCEMENT_PUBLISHING_SUCCEEDED- und ANNOUNCEMENT_PUBLISHING_FAILED-Ereignisse wartet? Als Reaktion auf diese Ereignisse gibt das Geschäft CHANGE-Ereignis und damit meine Benachrichtigungs-Updates aus.

Aber selbst wenn ich das tue, wie soll ich meine Benachrichtigung anweisen, ein-/auszublenden? Oder schlimmer, nach 2 Sekunden zu zeigen und zu verstecken?

Ich habe einige Komponenten auf GitHub gesehen und jeder von ihnen verwendet Refs etc, die ich persönlich nicht mag.

Zusammenfassend: Wie würden Sie dies implementieren? Oder gibt es ein solches Projekt? Wenn ja, wo finde ich es?

Answer 1

ich Ich würde nicht ein Geschäft ausschließlich für Benachrichtigungen mit mit, vor allem, wenn Sie Logik wollen um Einblenden/Ausblenden-Benachrichtigungen auf Timer, zeigt mehrere Benachrichtigungen, usw.

Es gibt zwei Möglichkeiten, etwas falsch sehen dies schreiben:

1. Binden Sie den NotificationStore direkt an die erfolgreichen/fehlgeschlagenen Rückrufe, die Ihnen wichtig sind, wie Sie in Ihrer Frage erwähnt haben. Sie sind sich nicht sicher, welche Flussimplementierung Sie verwenden, also wird dies Pseudocode-y sein.

   class NotificationStore { 
       constructor() { 
       this.notificationId = 0; 
       this.notifications = {}; 
       this.bindActionType(
        CLEAR_NOTIFICATION, 
        this.handleClearNotification 
       ); 
       this.bindActionType(
        ANNOUNCEMENT_PUBLISHING_SUCCEEDED, 
        this.handleAnnouncementPublishingSucceeded 
       ); 
       // etc... 
       } 
   
       handleAnnouncementPublishingSucceeded(action) { 
       this.addNotification("Success!", { timeout: 2000 }); 
       } 
   
       handleClearNotification(action) { 
       this.removeNotification(action.notificationId); 
       } 
   
       addNotification(message, options) { 
       const nextId = this.notificationId++; 
       const notification = { 
        message: message 
       }; 
   
       this.notifications[nextId] = notification; 
       this.emit("change"); 
   
       // if we specified a timeout, remove the notification 
       // after the timeout expires. 
       if (options.timeout) { 
        setTimeout(() => { 
        dispatch(CLEAR_NOTIFICATION, { 
         notificationId: nextId 
        }); 
        }, options.timeout); 
       } 
       } 
   
       removeNotification(notificationId) { 
       delete this.notifications[nextId]; 
       this.emit("change"); 
       } 
   } 
   

2. Geben Sie die gewünschten Benachrichtigungen in Ihren Aktionserstellern an. Dies ist expliziter, aber weniger zentralisiert.

   var publishAnnouncement = function (announcement) { 
       AnnouncementAPI.publishAnnouncement(
       announcement, 
       (response) => { 
        dispatch(ANNOUNCEMENT_PUBLISHING_SUCCEEDED, ...); 
        dispatch(CREATE_NOTIFICATION, { 
        message: "Success!", 
        timeout: 2000 
        }); 
       }, 
       (error) => { 
        dispatch(ANNOUNCEMENT_PUBLISHING_FAILED, ...); 
        dispatch(CREATE_NOTIFICATION, { 
        message: "Failure!" 
        }); 
       } 
   ) 
   }; 
   

   In diesem Fall würde der NotificationStore im Grunde gleich aussehen, aber ohne an jede erfolgreiche/fehlgeschlagene Aktion gebunden zu sein. In beiden Fällen würde ich ein einzelnes Benachrichtigungs-Widget oben in der Komponentenstruktur haben, das die Liste der Benachrichtigungen erstellt hat.

Answer 2

Zur Verteidigung von Refs (und als Autor des verknüpften GitHub Repo): Ihre Geschäfte könnte ein Ereignis emittieren, wenn sie sich ändern, die einen Handler in der Komponente haben würde. Dieser Handler würde dann die Benachrichtigung über den Verweis auslösen. Es ist viel weniger komplex, wenn Ihre Komponente die Benachrichtigung durch Refs anstelle von Requisiten behandelt.