如何從Flux中的組件檢測並響應成功和失敗？

例如，用戶需要創建資源。點擊「創建」按鈕將調用一個動作來發送數據到API。如果資源成功創建，請發送「成功」操作。否則，請發送「失敗」操作。如何從Flux中的組件檢測並響應成功和失敗？

組件如何響應Flux中的成功或失敗？我應該在組件讀取的商店中設置成功/失敗標誌嗎？我是否應該從商店中發佈單獨的事件，讓他們自己的聽衆在組件上成功/失敗？

更具體地說，我想要路由到「成功」創建的資源。如果我想打開「失敗」的特定對話框？我將如何從組件中做到這一點？

我只是想弄清楚最佳實踐。

謝謝！

2017-05-04 Kevin Lee

你究竟做了什麼取決於你使用哪種Flux實現。但是，處理它的方式差不多：

一般來說，在任何Flux實現中，您都可以將商店連接到組件道具，以便每當您的商店更新時，任何組件連接到商店將獲得更新的商店價值。因此，如果您想要對商店進行任何形式的更改，您要做的就是將您的組件連接到商店，並使用component update methods以使您的組件檢測商店的更改。

舉例來說，如果你想在一個API調用一個成功/失敗作出迴應，你會做什麼會在你的存儲以下內容：

{ 
    ... 
    runningApiRequest: //boolean value 
    apiRequestResult: //whatever your API returns 
    ... 
}

然後，您可以使用您的任何助焊劑庫用於使您的組件調用實際的API請求操作接收apiRequestSucceeded和apiRequestResult作爲道具。在您的組件，然後你可以執行以下操作：

componentDidUpdate(prevProps, prevState) { 
    if (!prevProps.runningApiRequest && this.props.runningApiRequest) { 
     // request started 
     this.showLoadingIndicator() 
    } 
    if (prevProps.runningApiRequest && !this.props.runningApiRequest) { 
     // request finished, handle success or failure 
     this.handleRequestResult(this.props.apiRequestResult) 
    } 
}

當然，這是不是這樣做的唯一途徑，但處理變爲通量店總會歸結到同一個基本組成部分：掛鉤道具到商店並處理生命週期方法中道具的變化。

來源

2017-05-05 01:36:57

如何從Flux中的組件檢測並響應成功和失敗？

回答

相關問題