Angular2 ngrxのTwitterのようなアプリ。構造体AppState

Question

最近、ngrxとreduxパターンを見ていて、既存のAngular2アプリをngrx/storeを使って書き直す方法を考えています。 私が持っているのは、ユーザーが閲覧でき、（サインインしていれば）引用を好きで公開できるアプリです。 典型的な引用オブジェクトは、次のようになります。

{ text: "Success is the ability to go from one failure to another with no loss of enthusiasm.", publisher: user12345, rank: 14, //some more data }

アプリケーションstrucureは、次のようになります。

• ホームページ - のいずれかの登録/ログインフォームまたはランダム引用して（ログインした場合）。
• ユーザーと新しいものを公開する形で発行されたすべての引用とタブ
  • タブとプロファイルページ。
  • プロフィール情報
• 引用は、上記と同様の構造を持つ他のユーザーのプロフィールを表示するページに
• ページを養います。 （ユーザーが引用の発行者をクリックしたとき）。

だから、私はAppStateツリーがどのように見えるかについてかなり不満を抱いています。

AppState { 
    UserState { 
     UserCitationsState, 
     UserInfoState, 
     AuthState 
    }, 
    RouterState, 
    UserPageState //State representing the other user's page viewed 
    //etc 
} 

主な質問は、すべてのデータがバックエンドREST APIからリクエストごとに取得されるため、各状態にどのようなデータを格納すればよいでしょうか。それは例えばのような単なるブール値：

UserPageState { 
    loading: false, 
    loaded: true 
} 

か、それはまた、すべての情報を格納し、ちょうどそれを新しいユーザーページが要求されるたびに交換する必要があるだろうか？ユーザーが他のユーザーのページに移動するたびに、すべてのデータがバックエンドからフェッチされます。 それは私の基本的な混乱のポイントです - 還元型でこれらの種類のアプリをどう扱うか。

EDIT は、私は、全体的なアプリを表現するために5つの状態（5つの減速）で自分自身を制限瞬間：

1. AuthState
2. UserState
3. UserListState
4. CitationState
5. CitationListState

しかし、全体のアプリ状態では、私はそれらの多くを複製しています。私はそれがうまくいくと思います。それとももっと良い方法がありますか？

export interface AppState 
 
{ 
 
    localUser: AuthState 
 
    
 
    //homePage 
 
    homeCitation: CitationState 
 

 
    //profilePage 
 
    profileInfo: UserState 
 
    profileCitations: CitationListState 
 
    favouriteCitations: CitationListState 
 
    subscribers: UserListState 
 

 
    //userPage (when local user navigates to citation publisher's profile) 
 
    userInfo: UserState 
 
    userCitations: CitationListState 
 
    userSubscribers: UserListState 
 
    
 
    //feedPage 
 
    feed: CitationListState 
 
    
 
    //..... 
 
}

Answer 1

この上の私の最初の考えは、多くのだろうデータベースあなたのようなアプリケーションの状態を考えること。

Iは、次減速を用いた構造になる：

AppState: { 
    CitationState 
    UserProfileState, 
    UserInfo, 
    RouterState 
} 

interface CitationState { 
citations: Citation[] 
} 

interface UserProfileState { 
userProfiles: UserProfile[] 
} 

interface UserInfo { 
userInfo: UserInfo 
} 

interface Citation { 
    id: number; 
    publisherId (userId): number; 
    rank: number; 
    text: string; 
} 

interface UserProfile { 
    userId: number; 
    citationIds: number[] 
} 

interface UserInfo { 
    userId: number; 
    authToken: string; 
} 

各スマートコンポーネントは、ビューをレンダリングするために必要に応じてデータを構成するであろう。たとえば、ルーティングされたユーザープロファイルがUserInfoレデューサーのものと一致するかどうかを確認することによって、ユーザープロファイルが独自のものかどうかを判断できます。

状態のロード/ロードの作成を心配しないでください。これは、ストアの状態から派生できるものです。すべてのデータが観測可能なので、そこからクエリを実行すると、利用可能なデータの最新のスナップショットが与えられます。

ユーザーの引用を読み込むときにストアの読み込みプロパティにバインドする代わりに、代わりにそのデータのクエリを作成します。例えば

：良い答えだ

let userCitation$ = state.select(appState => appState.citations) 
    .map(citations => { 
      let userCitation = citations.find(c => c.id === userId); 
      return { 
       loaded: !!userCitation, 
       userCitation: userCitation 
      }; 
    });