首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >@ngrx 4存储返回类型

@ngrx 4存储返回类型
EN

Stack Overflow用户
提问于 2017-08-04 01:27:29
回答 1查看 734关注 0票数 1

我正在使用Angular 4和@ngrx 4创建一个web应用程序,但我在Store返回类型上遇到了问题。这是我在其中使用Store的组件

代码语言:javascript
复制
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.select获得的观察者应该被类型化为State接口,因为我将Store创建为:store: Store<State>

但是,当我尝试将我的可观察对象分配给所选的Store (this.categoryObs$ = this.store.select('productTree');)时,我得到了这个错误:

代码语言:javascript
复制
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类。

这是我的复制品:

代码语言:javascript
复制
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;
  }
}

和操作:

代码语言:javascript
复制
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;
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-08-04 02:44:06

您的状态由Map<number, Node>类型的productTree组成

代码语言:javascript
复制
export interface State {
  productTree: Map<number, Node>;
  errorMsg: string;
}

您正在从存储中选择productTree

代码语言:javascript
复制
this.categoryObs$ = this.store.select('productTree');

因此,它将返回Map<number, Node>而不是Observable<State>

相反,您应该使用createFeatureSelector返回状态,然后订阅它,如下例所示。

代码语言:javascript
复制
 // reducers.ts
import { createSelector, createFeatureSelector } from '@ngrx/store';

export interface FeatureState {
  counter: number;
}

export interface AppState {
  feature: FeatureState
}

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

并在组件中使用此selectFeature

代码语言:javascript
复制
store.select(selectFeature).subscribe(store =. {
  this.counter = store.counter;
});

Read about selectors from here

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/45490945

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档