このngrxセレクタは何をしていますか？

Question

私はMaximeの回答をよりよく理解しようとしています。これはquestionです。私の担当者はそこに答えを述べるのに十分ではないので、私はここで新しい質問をするでしょう。

正規化された状態を設定する部分は意味があります。次に、セレクタを作成する方法について話を進め、答えのこの部分を下に引用し、コードブロックを示します。

ロジックまたはビュー（たとえばAngular）では、配列を反復処理できるように入れ子構造が必要なため、IDの文字列配列を反復したくありません。代わりに、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を表示したい部品に使用されるだろうか、これはもう少し詳細に説明することができますか？

Answer 1

@cartant私に私のoriginal questionをpingしましたので、ここで私は（thx @cartant！）です。

私はアプリ内の私のインターフェイスについて多くのことを考えます。私はよく定義されたインターフェイスを持つことが重要だと思うか、私たちは混乱に終わるだろう:)。

が、私はそれのための基本的なパターンを作成しようとしたとして、しばしば、我々は同じ考えで終わる：

1つのリソース：
- 詳細
とリソース - 詳細
のないリソース - IDのみを持つ外部キーが対応するリソースに置き換えられる
- UI変数（状態の表示、たとえばフェッチ、ダウンロードなど）を含む構成済みリソース

それらのリソースの複数が含まA「テーブル」、：
- 例えばbyIdと​​
ためと、正規化されたデータを含む - すべての項目について、この時間は、いくつかのUI変数がない含まれているが、テーブル（状態追加するため

私はangular-ngrx-starter,here for the interfacesのような詳細な例を作りました。

ちなみに、whole folderが興味深いかもしれません。これは、このスターター（アクション、レデューサー、エフェクト、インターフェース、セレクター、サービス、モックのサービス）の完全な例です。

あなたが理解するのに役立ちますが、これは完璧ではないことに注意してください。それはちょうど一つの方法、物事を見る私の方法です。

Answer 2

実際のContent配列がネストされている BlogContentの型定義がまだあるかどうかは私の質問です。

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を使用するようにリファクタリングしました。