当 ngrx 中的其他部分状态更改时触发日期订阅

Question

I have a start and end property which stores a date in my state .Anytime other part of the state get changed my subscription for start and end date get triggered.

this is my subscription

this.subs.sink = this.store
      .select(fromTransactionReducer.selectStartAndEndDate)
      .subscribe((date) => {
        console.log("range", date);
        this.range.setValue({
          start: date.start,
          end: date.end,
        });
      });

this is the selector

export const selectStartAndEndDate = createSelector(
  selectTransactionState,
  (state) => ({ start: state.start, end: state.end })
);

this is the dateRange reducer

  on(transactionActions.UpdateDateRange, (state, { start, end }) => ({
    ...state,
    start,
    end,
  })),

this is the date range action

export const UpdateDateRange = createAction(
  "[Transaction Page] Update Date Range",
  props<{ start: Date; end: Date }>()
);

this is my state

export interface State {
  transaction: Transaction[];
  cursors: Cursor;
  totalTransactions: number;
  loading: boolean;
  errorMessage: string;
  formErrorMessage: string;
  items_per_page: number;
  pageSizeOptions: number[];
  pageIndex: number;
  searchKey: string;
  formMessage: string;
  start: Date;
  end: Date;
  trans_type: string;
  base_type: string;
}
export const initialState: State = {
  transaction: [],
  cursors: {
    after: "",
    before: "",
    hasNext: false,
    hasPrevious: false,
  },
  totalTransactions: 0,
  loading: false,
  errorMessage: null,
  formErrorMessage: null,
  items_per_page: 5,
  pageSizeOptions: [2, 3, 5, 10, 15],
  pageIndex: 0,
  searchKey: "",
  formMessage: "",
  start: null,
  end: null,
  trans_type: null,
  base_type: null,
};

Anytime i dispatch a different action for example this.store.dispatch(transactionActions.ResetPageIndex()); , my subscription for the date get triggered.

why is that ?

In my reducer i only update start and end date when UpdateDateRange action is dispatched.

Answer 1

It's by design.

• store$ emits the entire state on every state change
• select pipes those state changes through your selector to give you only the state you are interested in
• select uses memoization so that if there are no changes to it's inputs, it returns the last calculated value without calling its projector function. Note that it still emits, even though there was no input value change.
• if you are using say Angular, it's change detection accommodates this behaviour by not firing when the selector value is the same.