Within my state, I have properties named start and end which store dates. Whenever any other part of the state is modified, the subscription for these start and end dates is triggered.
Here is the subscription implementation:
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 function used:
export const selectStartAndEndDate = createSelector(
selectTransactionState,
(state) => ({ start: state.start, end: state.end })
);
The dateRange reducer looks like this:
on(transactionActions.UpdateDateRange, (state, { start, end }) => ({
...state,
start,
end,
})),
Here is the action to update the date range:
export const UpdateDateRange = createAction(
"[Transaction Page] Update Date Range",
props<{ start: Date; end: Date }>()
);
This is the structure of 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 = {
// Initial state values here...
};
Whenever a different action is dispatched, such as
this.store.dispatch(transactionActions.ResetPageIndex());Why does this happen?
In my reducer, the start and end dates are only updated when the UpdateDateRange action is dispatched.