2017-08-02 84 views
2

我想知道如果商品不在商店中,那麼獲取商品的最佳方式是什麼。如果商品不在商店中,請發送一個操作以獲取它

例如,假設我有一個用戶列表,我想獲取特定用戶。如果該用戶不在商店中,我想從數據庫中取回他。

下面的代碼是否被認爲是最佳實踐還是有更好的方法呢?

const searchedUserId = 'abcdefg'; 
this.selecedUser$ = this.store.select(state => { 
    const selectedUserIndex = state.userList.findIndex(searchedUserId) 
    if (selectedUserIndex === -1) { 
    this.store.dispatch(new UsersActions.FetchUsers(searchedUserId)); 
    } else { 
    return state.userList[selectedUserIndex] 
    } 
}) 
+0

商店應該是您的應用程序中唯一的數據來源。因此,如果用戶不在商店中,您應該派發一個操作來獲取數據並更新商店,然後您應該從商店中檢索數據。 –

+0

但爲了取回用戶,我需要聽商店。 只有在選擇器內我可以做檢查... – doron

回答

0

創建selector以從商店獲取數據。

Creating a selector

在你的組件,你需要subscribe的狀態。

store.select(selectFeatureState).subscribe(state => { 
    //Search for the user in the state. 
    // If user is not there then dispatch the action 
    store.dispatch(ACTION); 
}); 

然後,創建Effects使用@ NGRX /效應

create effects

影響監聽操作,然後調用服務,檢索數據,並更新商店。

由於商店已經訂閱商店,它將更新組件。

+0

我瞭解商店/效果是如何工作的。我問是否我寫的代碼(你實際上寫的也是這樣)被認爲是最好的練習 – doron

0

你需要一名警衛。

  1. 定義一個路由,您的用戶資料組件(包含ID)
  2. 定義一個後衛這條路線,並把它放在CanActivate
  3. 在後衛,派遣LoadUserDetailsAction(用戶ID)
  4. 當該行動做出決議(後衛監聽加載詳細信息時商店)返回true,這樣您的組件可以顯示
  5. 它現在可以安全在yoir組件做store.select(的UserDetails)
+0

一個守衛甚至更糟糕的做法,然後我問上面。警衛應該阻止你訪問頁面,而不是加載更多的數據。如果我想要這種方法,我可以使用解析方法。 – doron

+0

沒有人說警衛正在加載除你以外的任何數據:)。警衛隊準確地做到了它的目的:確保你不會激活未準備好的組件。不加載單個數據。您將解析方法與狀態一起使用的想法非常奇怪,因爲這種方式與狀態管理的目的完全相反:您的應用程序的單一來源。但如果你認爲這是一種良好的做法,我是誰來阻止你;) –

+0

首先,我感謝你的幫助。但在這個問題上,我仍然認爲高爾夫不是正確的解決方案。我確信,在這種方式下,解決問題將是更好的方式。但無論如何,這不是我所需要的 – doron