Angular @ngrx 4存储返回类型

我正在使用Angular 4和@ngrx 4创建一个web应用程序，我在

Store

返回类型方面遇到了问题。这是我正在使用的

存储

的组件：

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();
  }

}

我不确定我做错了什么，因为我已经检查了

res

的值，它对应于

状态

类

这是我的redux：

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;
  }
}

导出接口状态{
产品树：地图；
errorMsg:string；
}
常量initialState:状态={
productTree:新映射（），
errorMsg:'
};
导出函数productTreeReducer（状态=初始状态，操作：productTreeOperations.Actions）：状态{
开关（动作类型）{
案例productTreeOperations.LOAD\u PRODUCT\u树：
返回initialState；//重置状态
案例productTreeOperations.LOAD\u PRODUCT\u TREE\u COMPLETE：
返回{productTree:action.payload，errorMsg:''}；
案例productTreeOperations.LOAD\u PRODUCT\u TREE\u失败：
返回{productTree:undefined，errorMsg:action.payload}
案例产品TreeOperations.DELETE\u分支：
返回deleteBranch（action.payload，state）；
案例产品TreeOperations.ADD\u子项：
返回addChild（action.payload.parent，action.payload.newChild，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;

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'；
/**
*从后端加载树并重置当前状态。
*/
导出类LoadProductTreeAction实现操作{
只读类型=加载\产品\树；
构造函数（公共有效负载：number）{}
}
/**
*返回从后端加载的树。
*/
导出类LoadProductTreeCompleteAction实现操作{
只读类型=加载产品树完成；
构造函数（公共有效负载：Map）{}
}
/**
*返回从后端加载树时发生的错误。
*/
导出类LoadProductTreeFailAction实现操作{
只读类型=加载\产品\树\失败；
构造函数（公共有效负载：字符串）{}
}
/**
*删除树的整个分支（当前节点和所有子节点）。
*/
导出类DeleteBranchAction实现操作{
只读类型=删除分支；
构造函数（公共有效负载：节点）{}
}
/**
*将子节点添加到节点。
*/
导出类AddChildAction实现操作{
只读类型=添加子项；
构造函数（公共负载：{parent:Node，newChild:Node}）{
}
导出类型操作=LoadProductTreeAction|
LoadProductTreeCompletection|
LoadProductTreeFailAction|
删除分支|
添加儿童行为；

您的状态由

productTree

组成，其类型为

Map

因此，它将返回

Map

而不是

obobalable

相反，您应该使用

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');

---

接受我的建议，阅读更多有关商店的信息，并在继续之前特别查看示例应用程序！我会的！谢谢你的帮助，也谢谢你为我澄清了一些事情！：）

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

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

 // 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;
});