2015-10-01 49 views
2

考慮一個多頁面應用程序,在打開一個頁面時,它會啓動一個計時器,負責每隔n秒處理一次數據。現在考慮你想進入另一個頁面,你如何保證定時器將被停止(因爲它不會在第二頁上需要)。React + Flux - 在多頁面上卸載頁面

我會實現它,如下所示:

App.jsx

onClickNavigateToPageA: function() { AppActions.goToA(); } 

AppActions.js

goToA: function() { 
    DispatchActionToLoadComponentPageA(); 
    DispatchActionToStartTimer(); 
} 

現在我點擊去B.如何告訴計時器頁面停止?如果我在componentWillUnmount上執行此操作(通過操作,我相信),我將在操作(加載頁面B的操作)期間調度操作,因此它是錯誤的。

正確的方法是在加載頁面A後立即註冊一個回調(這將調用一個禁用定時器的動作),然後在加載任何其他頁面時調用它?據我所知,商店現在不應該用於從服務器獲取數據的API(包括定時器,它應該是動作創建者)。

回答

2

您可以使用您想要的任何JSON負載分派操作,這意味着您可以通過分派操作本身的屬性對操作類型進行分組。在這種情況下,從DispatchActionToLoadComponentPageA有效載荷可能是:

{ 
    type: 'pageLoad', 
    page: 'pageA' 
} 

這將是從其他類型的操作不同,你可能會派遣這樣的:

{ 
    type: 'xhrComplete', 
    response: ... 
} 

現在你的計時器可以監聽pageLoad類型和開始行動/根據加載的頁面是否需要定時器來停止自身。

+0

看起來像一個乾淨的解決方案也許有點沉重,只是一個計時器,但乾淨我猜 –

+0

計時器是隻是一個例子。 –

+0

我明白你現在在說什麼。很明顯,當頁面加載時啓動計時器的商店可能負責在需要其他頁面時停止該計時器。 –

1

如果你沒有使用你的計時器和商店,我不會使用動作和通量循環。如果它與商店有關,則使用流量循環。 無論如何,我只需要使用一個帶有所需功能的通用「計時器」模塊,並在需要時打開/關閉它。

+0

其實,當我加載頁面A(例如)時,我啓動了一個計時器來輪詢數據並更新我的商店。所以,當我離開那個頁面時,我想停止計時器(因爲不再需要數據更新)。那麼,你是在告訴我,我的實施是正確的? –

+0

yes,imo它是正確的,pherris方式很好 –

+0

哪裏可以讓我的API調用?我目前正在做一個動作創建者(一個請求,一個當收到/失敗)。這是正確的,還是應該由商店處理整個過程?我不喜歡將它結合起來,這就是爲什麼我更喜歡不使用商店取消計時器的原因。 –