@ngrx 4 store return type

Question

Angular 4と@ngrx 4を使用してWebアプリケーションを作成していますが、Storeの戻り値型に問題があります。これは、私が使用しているコンポーネントであるStore：

私は Storeなどを作成するので、私は store.selectから取得する観察者は、 Stateインタフェースに入力する必要がありますドキュメントの理解ができるものから、

export class ProductEditComponent implements OnInit, OnDestroy { 

    categoryMap: Map<number, Node>; 
    categoryObs$: Observable<State>; 
    categoryObsSubscription; 

    constructor(private store: Store<State>) { } 

    ngOnInit() { 
    // Retrieve data from the backend. 
    this.categoryObs$ = this.store.select('productTree'); 
    this.categoryObsSubscription = this.categoryObs$.subscribe((res: State) => { 
     this.categoryMap = res.productTree; 
    }, (error) => { 
     console.error(error); 
    }); 

    this.store.dispatch(new productTreeActions.LoadProductTreeAction(1)); 
    } 

    ngOnDestroy() { 
    this.categoryObsSubscription.unsubscribe(); 
    } 

} 

：私が選択したStore（this.categoryObs$ = this.store.select('productTree');）に私の観察可能なを割り当てるしようとすると、store: Store<State>

はしかし、私はこのエラーを取得する：

Type 'Store<Map<number, Node>>' is not assignable to type 'Observable<State>'. Types of property 'operator' are incompatible. Type 'Operator<any, Map<number, Node>>' is not assignable to type 'Operator<any, State>'. Type 'Map<number, Node>' is not assignable to type 'State'. Property 'productTree' is missing in type 'Map<number, Node>'. 

私はresの値をチェックしており、それはStateクラスに対応しているので、何が間違っているのか分かりません。

export interface State { 
    productTree: Map<number, Node>; 
    errorMsg: string; 
} 

const initialState: State = { 
    productTree: new Map<number, Node>(), 
    errorMsg: '' 
}; 

export function productTreeReducer(state = initialState, action: productTreeOperations.Actions): State { 

    switch (action.type) { 
    case productTreeOperations.LOAD_PRODUCT_TREE: 
     return initialState; // Reset state 

    case productTreeOperations.LOAD_PRODUCT_TREE_COMPLETE: 
     return { productTree: action.payload, errorMsg: '' }; 

    case productTreeOperations.LOAD_PRODUCT_TREE_FAIL: 
     return { productTree: undefined, errorMsg: action.payload } 

    case productTreeOperations.DELETE_BRANCH: 
     return deleteBranch(action.payload, state); 

    case productTreeOperations.ADD_CHILD: 
     return addChild(action.payload.parent, action.payload.newChild, state); 

    default: 
     return state; 
    } 
} 

とアクション：

export const LOAD_PRODUCT_TREE = 'load-product-tree'; 
export const LOAD_PRODUCT_TREE_COMPLETE = 'load-product-tree-complete'; 
export const LOAD_PRODUCT_TREE_FAIL = 'load-product-tree-fail'; 

export const DELETE_BRANCH = 'delete-branch'; 
export const ADD_CHILD = 'add-child'; 

/** 
* Loads tree from backend and resets current state. 
*/ 
export class LoadProductTreeAction implements Action { 
    readonly type = LOAD_PRODUCT_TREE; 
    constructor (public payload: number) { } 
} 

/** 
* Returns the loaded tree from the backend. 
*/ 
export class LoadProductTreeCompleteAction implements Action { 
    readonly type = LOAD_PRODUCT_TREE_COMPLETE; 
    constructor (public payload: Map<number, Node>) { } 
} 

/** 
* Returns an error that happened when the tree was being loaded from the backend. 
*/ 
export class LoadProductTreeFailAction implements Action { 
    readonly type = LOAD_PRODUCT_TREE_FAIL; 
    constructor (public payload: string) { } 
} 

/** 
* Deletes an entire branch of the tree (the current node and all child nodes). 
*/ 
export class DeleteBranchAction implements Action { 
    readonly type = DELETE_BRANCH; 
    constructor (public payload: Node) { } 
} 

/** 
* Adds a child to a node. 
*/ 
export class AddChildAction implements Action { 
    readonly type = ADD_CHILD; 
    constructor (public payload: { parent: Node, newChild: Node }) { } 
} 

export type Actions = LoadProductTreeAction | 
         LoadProductTreeCompleteAction | 
         LoadProductTreeFailAction | 
         DeleteBranchAction | 
         AddChildAction; 

Answer 1

あなたの状態はあなたが店からproductTreeを選択しているMap<number, Node>

export interface State { 
    productTree: Map<number, Node>; 
    errorMsg: string; 
} 

型であるproductTreeで構成されてここで

は私の再来であります。

this.categoryObs$ = this.store.select('productTree'); 

したがって、それはMap<number, Node>なくObservable<State>を返します。

代わりに、createFeatureSelectorを使用して状態を戻し、次に例のようにサブスクライブしてください。

// reducers.ts 
import { createSelector, createFeatureSelector } from '@ngrx/store'; 

export interface FeatureState { 
    counter: number; 
} 

export interface AppState { 
    feature: FeatureState 
} 

export const selectFeature = createFeatureSelector<FeatureState>('feature'); 

と、私のアドバイスを取る店についていくつかのより多くのを読んで、特別に続行する前に例のアプリを見てみましょう、あなたのコンポーネントに

store.select(selectFeature).subscribe(store =. { 
    this.counter = store.counter; 
}); 

Read about selectors from here