助焊劑商店異步數據加載

說我有一個TodoStore。 TodoStore負責保管我的TODO物品。待辦事項項目存儲在數據庫中。助焊劑商店異步數據加載

我想知道什麼是加載所有的待辦事項進店，以及如何的意見應與存儲交互在啓動時加載的TODO項的推薦方式。

第一種方法是創建一個loadTodos動作，它將從數據庫中檢索Todos併發出TODOS_LOADED事件。視圖然後將調用loadTodos操作，然後收聽TODOS_LOADED事件，然後通過調用TodoStore.getTodos()來更新自己。

另一種替代方法是沒有loadTodos動作，並有一個TodoStore.getTodos()，它將返回一個承諾與現有的TODO項目。如果TodoStore已經加載了TODO項目，它只是返回它們;如果沒有，那麼它將從數據庫中查詢並返回檢索到的項目。在這種情況下，即使商店現在已經加載了TODO項目，它也不會發出TODOS_LOADED事件，因爲getTodos不是一個動作。

function getTodos() { 
    if (loaded) 
     return Promise.resolve($todoItems); 
    else 
     return fetchTodoItemsFromDatabase().then(todoItems) { 
     loaded = true; 
     $todoItems = todoItems; 
     return $todoItems; 
     }); 
}

我相信很多人會說，這打破了流量結構，因爲getTodos功能正在改變商店狀態和存儲狀態應該只從雖然調度員發出的行動來改變。

但是，如果您認爲TodoStore的狀態是數據庫中現有的TODO項目，那麼getTodos並不會真的改變任何狀態。 TODO項目完全相同，因此不需要更新或通知視圖。現在唯一的情況是商店已經檢索了數據，所以現在它被緩存在商店中。從View的角度來看，它不應該關心Store是如何實現的。如果商店仍然需要從數據庫中檢索數據，它應該不太在意。所有觀看者關心的是他們可以使用商店獲取TODO商品，並且當新的TODO商品被創建，刪除或更改時，商店將通知他們。

因此，在這種情況下，視圖應該只是調用TodoStore.getTodos（）在加載時呈現它們自己，並在TODO_CHANGE上註冊一個事件處理程序，以便在需要通過添加，刪除或更改。

您如何看待這兩種解決方案？他們是否有其他解決方案？

來源

2014-07-10 rafalotufo

視圖不一定是調用loadTodos（）的實體。這可能發生在引導文件中。

您應該儘量將數據流限制爲調度有效負載內的操作，這是正確的。有時您需要根據其他商店的狀態來獲取數據，這就是Dispatcher.waitFor（）的用途。

什麼是關於您的fetchTodoItemsFromDatabase（）解決方案的助焊劑類似於沒有其他實體正在設置存儲上的數據。商店正在更新自己。這很好。

我唯一的這一解決方案的嚴肅批評是，它可能會導致在渲染，如果你實際上是從服務器獲得的初始數據的延遲。理想情況下，你會用HTML發送一些數據。您還需要確保在控制器視圖的getInitialState（）方法中調用商店的數據。

來源

2014-08-13 17:27:58 fisherwebdev

這是我的意見，非常接近你的。

我從Immutable.js
保持通過Immutable.Record和Immutable.OrderedMap我在Store應用程序的狀態我從商店得到其狀態的頂控制器視圖組件。

東西如下列：

function getInitialState() { 
    return { 
     todos: TodoStore.getAll() 
    } 
}

TodoStore.getAll方法將通過APIUtils.getTodos()請求從服務器中檢索數據，如果它是內部_todos映射爲空。我主張讀數據觸發Store和寫觸發的數據在ActionCreators。
通過請求是處理的時間，我的分量將呈現一個簡單的加載旋轉器或類似的東西
當請求結算時，APIUtils觸發取決於響應的狀態如TODO_LIST_RECEIVE_SUCCESS或TODO_LIVE_RECEIVE_FAIL動作
我TodoStore將響應通過更新其內部狀態，這些行動（填充它的內部Immutable.OrderedMap與Immutable.Record從行動有效載荷創建。

如果你想通過一個基本的實現，看一個例子，拿廁所k到this answer about React/Flux and xhr/routing/caching。

來源

2015-08-26 15:50:50 Pcriulan

我知道這個問題已經過去了兩年，但它完美地總結了本週我正在努力解決的問題。所以爲了幫助任何可能會遇到這個問題的人，我發現了這個博客文章，這對Nick Klepinger幫助很大："ngrx and Tour of Heroes"。

它特別使用Angular 2和@ ngrx/store，但很好地回答你的問題。

來源

2017-04-05 15:28:56

助焊劑商店異步數據加載

回答

相關問題