NgRx - 状態がどのようにスライスされるか

Question

各レデューサーの個々の状態がどのようにスライスされているかという質問があります。 オンラインで多くのチュートリアル（this oneのような）には、AppStateと呼ばれるすべての個々の状態を組み合わせた手動で定義されたルートグローバル状態があります。

StoreModule.provideStore({r1: ReducerFunc1, r2: ReducerFunc2, ...}) 

オブジェクトキーr1とr2文字列セレクタを使用したときの状態のスライスを照会するために使用することができます。

はそれが正しい、我々はすべてのStoreModuleにレデューサーを含むオブジェクトリテラルを渡すときと言うことです：

store.select("r1") 

しかし、我々は型の安全性が必要な場合は、我々はAppStateインタフェースを定義し、我々はを使用できるように、オブジェクトキーがNgRxに渡されたリテラル減速オブジェクトのオブジェクトキーと一致することを確認してください（これはAppStateインターフェイスの唯一の有用なケースです）？

Answer 1

は、このようにそれを設定：

export interface AppState { 
    auth: AuthState; 
    contacts: ContactsState; 
    events: EventsState; 
} 

各スライスは、それ自身のインタフェースを持っているでしょう。

次にあなたが

imports: [ 
    StoreModule.forRoot(reducers), 
], 

アプリのモジュールで、あなたの認証減速をお使いの減速

export const reducers: ActionReducerMap<AppState> = { 
    auth: fromAuth.reducer; 
    contacts: fromContacts.reducer; 
    events: fromEvents.reducer; 
} 

を設定し、例えば、などこの

export function reducer(state: AuthState = initialAuthState, 
         action: Action) { 

のように定義されます各レデューサーは、そのキー、認証レデューサーと認証状態によって呼び出されます。

Answer 2

あなたはAppStateインターフェイスをセットアップする必要があると思います。

constructor(private store: Store) 

ストアはそうのようなインターフェースで取ることがあります：あなたが欲しいかもしれないAppStateを指定する必要があることを考えると

constructor(private store: Store<AppState>) 

お店を注入依存関係際たとえば、あなたがこれを行うことはできませんあなたが型の安全性を得るので、常にAppStateスライスを取得するために太い矢印関数を使用します。型の安全性を持つように

store.select(appstate => appstate.r1)