ReactJS + Flux - Come implementare toasts/notifiche?

Question

Sto cercando di capire Flux e Reactjs.

consideri un seguito, molto semplice scenario:

Si dispone di un modulo con alcuni ingressi. Quando l'utente invia il modulo,

ActionCreator.publishAnnouncement(this.state.announcement); 

viene chiamato all'interno del componente modulo. Questo è come il metodo publishAnnouncement assomiglia:

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

AnnouncementAPI è solo un wrapper seguito di una chiamata HTTP POST AJAX. Ci vogliono due callback: su successo e fallimento.

E ora: ho bisogno di mostrare una notifica/pane tostato sullo schermo - che indica il successo o il fallimento. Come lo faresti in un modo Flux?

Stavo pensando di creare il componente di notifica e di renderlo nel mio modulo. come la seguente:

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

ma come faccio a gestire tali callback? Devo creare NotificationStore che ascolta gli eventi ANNOUNCEMENT_PUBLISHING_SUCCEEDED e ANNOUNCEMENT_PUBLISHING_FAILED? In reazione a tali eventi, il negozio emette l'evento CHANGE e quindi i miei aggiornamenti di notifica.

Ma anche se lo faccio, come dovrei istruire la mia notifica a mostrare/nascondere? O peggio, per mostrarsi e nascondersi dopo 2 secondi?

Ho visto alcuni componenti su GitHub e ognuno di loro utilizza i riferimenti ecc., Che personalmente non mi piace.

Per riassumere: Come implementare questo? O forse un tale progetto esiste? Se sì, dove posso trovarlo?

Answer 1

Non vedo nulla di male ad avere un negozio solo per le notifiche, soprattutto se si vuole la logica in giro a mostrare/nascondere le notifiche sul timer, mostrando più notifiche, ecc

Ci sono due modi vorrei prendere in considerazione scrivere questo:

1. Bind il NotificationStore direttamente al successo/insuccesso callback che ti interessano, come lei ha citato nella sua interrogazione. Non sei sicuro di quale implementazione di flusso stai usando, quindi questo sarà pseudocodice-y.

   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. Specificare le notifiche che si desidera nei creatori di azioni. Questo è più esplicito ma meno centralizzato.

   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 questo caso, NotificationStore sembrerebbe fondamentalmente lo stesso, ma senza vincolanti per ogni azione riuscita/fallita. In entrambi i casi, avrei un singolo widget di notifiche vicino alla parte superiore dell'albero dei componenti che ha visualizzato l'elenco delle notifiche.

Answer 2

In difesa di arbitri (e come l'autore del repo GitHub collegato): I negozi potrebbero emettere un evento quando cambiano, che avrebbe un gestore nel componente. Questo gestore quindi attiverebbe la notifica tramite il rif. È molto meno complesso che il tuo componente gestisca la notifica tramite refs anziché puntelli.