Question

I have a store state as:

export interface DocumentState {
  document: Document;
  selectedPage: number;
}

I want to call DoSomethingOnlyOnDocumentChange(doc: Document) and DoSomethingOnlyOnPageChange(Document: doc, page: number). The idea is not to execute the handlers on other's state change. I have subscribed to state changes as follows:

this.store$.select(appState => appState.documentState.document).subscribe(this.DoSomethingOnlyOnDocumentChange);
this.store$.select(appState => appState.documentState.selectedPage).subscribe(this.DoSomethingOnlyOnPageChange);

How do I access the document in page change state handler?

Answer 1

That's the reason why ngrx selectors exist.

First create a selector for the state slice you need:

export const selectDocument = createFeatureSelector<AppState, 
  DocumentState>('document');

export const getDocument = createSelector(
  selectDocument,
  (state: DocumentState) => state.document
);

Then use it in your component:

this.store$.select(getDocument).subscribe(this.DoSomethingOnlyOnDocumentChange);

This way only changes made to the document slice will be handled by DoSomethingOnlyOnDocumentChange

Ref: ngrx documentation

Ngrx store: Execute select handler on a specific slice change with extra data

1 个答案: