My goal is to update the Observable by connecting it to the store, but I encountered an issue where it didn't get updated when the store received a new value:
Within my component, I have declared 'tasks' as an Observable:
tasks$: Observable<any> = this.store.pipe(select(state => {
console.log('state', state);
return state;
})); // This works and retrieves the full state
tasks$: Observable<TaskModel[] | undefined> = this.store.select(selectTasks);
// However, this does not work, as it cannot select tasks from the state
Reducer:
const tasksReducers = createReducer(
initialState,
on(getTasks, (state) => ({...state, isLoading: true})),
on(getTasksSuccess, (state, result) => ({...state, tasks: result.tasks, isLoading: false}))
);
Selector:
export const selectTasksState = (state: TasksState) => state;
export const selectTasks = createSelector(
selectTasksState,
(state: TasksState) => state.tasks
);
Effect:
getTasks$ = createEffect(() =>
this.actions$.pipe(
ofType(getTasks),
exhaustMap(action => this.tasksService.getTasks().pipe(
tap(response => console.log('response', response)),
map(tasks => getTasksSuccess({tasks})),
catchError((error: any) => of(getTasksFailure(error)))
))
)
);
Actions:
export const getTasks = createAction(TasksActionTypes.GET_TASKS);
export const getTasksSuccess = createAction(TasksActionTypes.GET_TASKS_SUCCESS, props<{tasks: TaskModel[]}>());
export const getTasksFailure = createAction(TasksActionTypes.GET_TASKS_FAILURE, props<{message: string}>());
State:
export interface TasksState {
tasks?: TaskModel[],
isLoading?: boolean;
isLoadingSuccess?: boolean;
isLoadingFailure?: boolean;
}
It seems that the selector is not recognizing the state change, thus the update is not being reflected. I have verified that a new object is created in the reducer, so I am unsure of where the issue lies.