javascript - ReactJS + Flux - Miten toteuttaa toasteja/ilmoituksia?

Yritän ymmärtää Fluxia ja Reactjs:ää.

Harkitse seuraavaa, hyvin yksinkertaista tilannetta:

Sinulla on lomake, jossa on muutama syötekenttä. Kun käyttäjä lähettää lomakkeen,

ActionCreator.publishAnnouncement(this.state.announcement);

kutsutaan lomakekomponenttini sisällä. Tältä näyttää publishAnnouncement-metodi:

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

AnnouncementAPI on vain kapseli AJAX HTTP POST -kutsun päälle. Se ottaa kaksi takaisinkutsua - onnistumiselle ja epäonnistumiselle.

Ja nyt: minun täytyy näyttää ilmoitus/toast-viesti näytöllä - joka ilmaisee onnistumisen tai epäonnistumisen. Kuinka tekisit sen Flux-tavalla?

Ajattelin luoda Ilmoitus-komponentin ja renderöidä sen lomakkeeni sisälle. Kuten seuraavasti:

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

Mutta miten käsittelen näitä takaisinsoittoja? Pitäisikö minun luoda NotificationStore, joka kuuntelee ANNOUNCEMENT_PUBLISHING_SUCCEEDED- ja ANNOUNCEMENT_PUBLISHING_FAILED-tapahtumia? Näihin tapahtumiin reagoidessaan store lähettää CHANGE-tapahtuman, ja näin Notification päivittyy.

Mutta vaikka tekisinkin niin, miten minun pitäisi ohjeistaa Ilmoitustani näyttämään/piilottamaan? Tai vielä pahempaa, ilmestymään ja katoamaan 2 sekunnin kuluttua?

Olen nähnyt muutamia komponentteja GitHubissa, ja jokainen niistä käyttää refsejä ym., mitä henkilökohtaisesti en pidä.

Yhteenvetona: Miten toteuttaisit tämän? Tai ehkä tällainen projekti on olemassa? Jos on, mistä voin sen löytää?

Vastaus #1

En näe mitään väärää siinä, että olisi kauppa pelkästään ilmoituksia varten, erityisesti jos haluat logiikkaa ilmoitusten näyttämiseen/piilottamiseen ajastimilla, useiden ilmoitusten näyttämiseen jne.

On kaksi tapaa, joita harkitsisin kirjoittavani tämän:

1. Sidota NotificationStore suoraan kiinnostaviin onnistumis-/epäonnistumiskutsuihin, kuten mainitsit kysymyksessäsi. En ole varma, mitä flux-toteutusta käytät, joten tästä tulee pseudokoodimaista.

   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. Määritä ilmoitukset, jotka haluat toimintojen luojissa. Tämä on selkeämpää mutta vähemmän keskitettyä.

   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!"
         });
       }
     )
   };
   

   Tässä tapauksessa NotificationStore näyttäisi periaatteessa samalta, mutta ilman sitoutumista jokaiseen onnistumis-/epäonnistumistoimintaan. Kummassakin tapauksessa minulla olisi yksi Notifications-widget komponenttipuun yläosassa, joka renderöi ilmoituslistan.

Vastaus #2

Tuomareiden puolustukseksi (ja linkatun GitHub-repon kirjoittajana): Kauppasi voisivat lähettää tapahtuman, kun ne muuttuvat, ja komponentilla olisi käsittelijä tälle tapahtumalle. Tämä käsittelijä käynnistäisi sitten ilmoituksen refin kautta. On paljon vähemmän monimutkaista antaa komponenttisi käsitellä ilmoitus refien kautta propsien sijaan.