How to do the ngrx state structure correctly?

Question

I am trying to implement a feature state which has a graph state, two subfeatures: a node state and a link state;

the graph state and reducer I am implementing it like this:

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

and it is doing fine; but now I am learning Entity, and I've read some posts, it seems that the way I implemented is not correct.

How do I implement this using Entity correctly?

I want the components can CRUD the node and link from the main feature which is the graph feature, and I want to select graph to get the nodes and links at once this.nodesAndLinks$ = this._store.pipe(select(fromGraph.getNodesAndLinks))

score 0 · Answer 1 · answered Jun 01 '20 at 09:37

With ngrx entity you need to create 2 states: one for the link entity and another one for the node entity.

for example like that:

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

depends what is the best fit for you, and then you can use their adapters to fetch the data.

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

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

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

If you want to build a graph based on the nodeIds and linkIds you can use ngrx-entity-relationship, but it would require more coding to setup everything.

How to do the ngrx state structure correctly?

1 Answers1