Question

我正在尝试实现具有图形状态，两个子功能的特征状态：节点状态和链接状态； </ p>

图形状态和化简器我是这样实现的：

export interface GraphState {
  [fromNode.featureKey]: fromNode.State;
  [fromLink.featureKey]: fromLink.State;
}
export interface AppState extends fromRoot.State {
  readonly [featureKey]: GraphState;
}

export const reducers: ActionReducerMap<GraphState> = {
  [fromNode.featureKey]: fromNode.reducer,
  [fromLink.featureKey]: fromLink.reducer,
};//The main reducer

//feature module
StoreModule.forFeature(fromGraph.graphsFeatureKey, fromGraph.reducers),

//components that use this store
private _store: Store<fromGraph.AppState>
this._nodes$ = this._store.pipe(select(fromGraph.getNodes));
this._links$ = this._store.pipe(select(fromGraph.getLinks));
this._store.dispatch(fromGraphActions.AddNode({ node }));

一切都很好；但是现在我正在学习Entity，并且已经阅读了一些帖子，看来我的实现方式不正确。

如何正确使用实体实现此目的？

我希望组件可以从作为图形功能的主要功能中删除节点并链接，我想选择图以一次获取节点和链接this.nodesAndLinks$ = this._store.pipe(select(fromGraph.getNodesAndLinks)) < / p>

Answer 1

使用ngrx实体，您需要创建2种状态：一种用于链接实体，另一种用于节点实体。

例如这样的

interface Link {
  id: string;
  link: string;
}
export interface LinkState extends EntityState<Link> {}

interface Node {
  id: string;
  nodeIds: Array<string>;
  linkIds: Array<string>;
}
export interface NodeState extends EntityState<Node> {}

取决于最适合您的内容，然后您可以使用它们的适配器来获取数据。

const linkAdapter = createEntityAdapter<Link>();
const nodeAdapter = createEntityAdapter<Node>();

export getLinks = createSelector(
  selectLinkFeature(),
  linkAdapter.getSelectors().selectAll,
);

export getNodes = createSelector(
  selectNodeFeature(),
  nodeAdapter.getSelectors().selectAll,
);

如果要基于nodeId和linkId构建图，则可以使用ngrx-entity-relationship，但需要更多的代码来设置所有内容。

如何正确执行ngrx状态结构？

1 个答案: