這個ngrx選擇器在做什麼？

我試圖更好地理解由Maxime給這個question的答案。我的代表不夠高，不能評論那裏的答案，所以我會在這裏問一個新問題。這個ngrx選擇器在做什麼？

關於設置標準化狀態的部分很有意義。然後他繼續談論你將如何創建一個選擇器，他的答案的這一部分在下面引用，並顯示他的代碼塊。

在你的邏輯或視圖（例如Angular）中，你需要你的嵌套結構，這樣你可以迭代你的數組，因此，你不想迭代一個字符串數組。相反，您需要actualContent：ActualContent [] ;.

爲此，您創建一個選擇器。每當您的商店發生變化時，您的選擇器都會啓動並生成新的「查看」原始數據。

// assuming that you can blogContentsState and actualContentsState from your store 
const getBlogContents = (blogContentsState, actualContentsState) => 
    blogContentsState 
    .allIds 
    .map(blogContentId => ({ 
     ...blogContentsState.byId[blogContentId], 

     actualContent: blogContentsState 
     .byId[blogContentId] 
     .actualContentIds 
     .map(actualContentId => actualContentsState.byId[actualContentId]) 
    }));

我的問題是，無論是否仍有的BlogContent與actualContent陣列的類型定義嵌套？

export interface BlogContent { 
    id: string; 
    header: string; 
    tags: string[]; 
    title: string; 
    actualContent: ActualContent[]; <------ NESTED 
}

我不太明白什麼選擇getBlogContents在做什麼，如何做到這一點的要與actualContents的嵌套列表中顯示blogContents組件一起使用，可這一點更詳細的解釋？

來源

2017-07-26 ksimonson10

@cartant在我的original question上釘住了我，所以我在這裏（thx @cartant！）。

我對應用程序中的接口做了很多瞭解。我認爲定義好的界面非常重要，否則我們會陷入混亂的境地:)。

我試着爲它創建一個基本格局，爲常，我們最終得到了同樣的想法：

一個資源：
- 資源而不細節
- 資源與信息
- 組合資源，其中只有ID的外鍵被替換爲相應的資源
- 具有UI變量的組合資源（用於顯示狀態，例如獲取，下載等）

A「表」，其中包含這些資源的多：
- 包含標準化數據，與例如byId和
- 包含了一些UI變量，這個時候並不適用於所有項目，但該表（州添加一個資源會去那裏，因爲資源不在列表中，例如）

我在angular-ngrx-starter,here for the interfaces內做了這樣一個詳細的例子。

順便提一下，您可能會對whole folder感興趣，這是一個完整的示例，它是該服務的啓動器（動作，縮減器，效果，接口，選擇器，服務和模擬）。

希望它可以幫助你理解，但請記住，這並不完美！這只是一種方式，我看待事物的方式。

來源

2017-07-29 10:11:42 Maxime

我的問題是，無論是否仍有 BlogContent的與actualContent陣列的類型定義嵌套？

BlogContent僅包含用於actualContent的ID數組。

我不太明白什麼選擇getBlogContents做以及如何做到這一點的要與actualContents的嵌套列表中顯示 blogContents組件一起使用，這會是多一點解釋詳情？

Maxime引用他自己的項目，他做了類似的模式。

這是他的選擇：https://github.com/maxime1992/pizza-sync/blob/master/frontend/src/app/shared/states/orders/orders.selector.ts

然後，他用在這裏：https://github.com/maxime1992/pizza-sync/blob/b127ef963640d67f7560fad69f6f8364355ac697/frontend/src/app/features/order-summary-dialog/order-summary-dialog.component.ts

ngOnInit() { 
    this.orderSummary$ = this.store$.let(getOrderSummary); 
}

請注意，這是舊的方式做選擇。 ngrx示例應用程序曾經使用它，但他們已經重構爲所有選擇器使用reselect.js。

來源

2017-07-26 20:45:30 seescode

嗨sawcode我很高興看到你已經看着披薩同步:)！是的，我知道我不會使用重新選擇進入pizza-sync，但我打算一旦它變得更加穩定就將它升級到ngrx v4（我已經在這次重大升級中遇到了一些錯誤，並且我正在等待一些問題關閉他們的github）。一旦沒事的話，我會做一個重構，然後我會使用ngrx v4提供的createSelector，它與重做相同:) – Maxime

感謝您公開您的項目。我還沒有嘗試過ngrx v4，但在試用之前知道我應該等待更長時間會很有用。 – seescode

是的，的確，我並不是唯一注意到ngrx v4和AOT之間不兼容的人。如果你不使用AOT編譯（這太糟糕了），那麼你可能會去做。另外，如果您有一個應用程序要遷移到ngrx v4，則可以啓動，因爲在開發模式下，沒有AOT的情況下，一切看起來都正常。 – Maxime

這個ngrx選擇器在做什麼？

回答

相關問題