ReactJS + Flux - 如何實現吐司/通知？

我想了解Flux和Reactjs。ReactJS + Flux - 如何實現吐司/通知？

考慮後面的，很簡單的場景：

你有幾個輸入的形式。當用戶提交表單時，

ActionCreator.publishAnnouncement(this.state.announcement);

在我的表單組件中被調用。這是publishAnnouncement方法的樣子：

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

AnnouncementAPI只是在一個AJAX HTTP POST調用的包裝。它需要兩個回調 - 成功和失敗。

現在：我需要在屏幕上顯示通知/敬酒 - 指示成功或失敗。 你如何以Flux的方式做到這一點？

我正在考慮創建通知組件並將其呈現在我的窗體中。像下面這樣：

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

但我怎麼處理這些回調？我應該創建NotificationStore來監聽ANNOUNCEMENT_PUBLISHING_SUCCEEDED和ANNOUNCEMENT_PUBLISHING_FAILED事件嗎？針對這些事件，商店發出CHANGE事件並因此發出通知更新。

但即使我這樣做，我應該如何指示我的通知顯示/隱藏？或者更糟的是，在2秒後出現並隱藏？

我在GitHub上看到過很少的組件，每個組件都使用了我個人不喜歡的參考等。

總結： 你會怎麼實現這個？或者也許這樣的項目存在？如果是這樣，我在哪裏可以找到它？

來源

2015-04-15 slnowak

Facebook自己談論的是在Facebook中使用React和Flux在其流量架構初始視頻中實現通知（用戶消息）。 –

'refs'是推薦的方法。對不起，你的個性需要改變;-) – Eric

但是不應該呈現描述你的組件在某個時間點的狀態的函數嗎？如果是這樣，那麼使用這樣一個組件與refs完全打破它。 – slnowak

我看不出什麼毛病僅具商店的通知，特別是如果你想顯示左右/定時器上隱藏的通知，顯示多個通知邏輯等

有兩種方法我會考慮寫這個：

把NotificationStore直接綁定到你關心的成功/失敗回調，就像你在你的問題中提到的那樣。不確定你使用的是什麼通量實現，所以這將是僞代碼-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"); 
    } 
}

在動作創建者中指定所需的通知。這更明確，但較少集中。

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

在這種情況下，NotificationStore看起來基本相同，但沒有綁定到每個成功/失敗操作。無論哪種情況，我都會在組件樹頂部附近的單個Notifications小部件顯示通知列表。

來源

2015-04-15 15:40:34

在裁判的防禦（和鏈接的GitHub庫的作者）：當他們改變你的店可能會發出一個事件，這將對在分量的處理器。這個處理程序然後會通過ref觸發通知。你的組件通過refs而不是道具來處理通知，這是複雜得多的。

來源

2015-06-09 20:03:05

ReactJS + Flux - 如何實現吐司/通知？

回答

相關問題