State Change Not Detected by Async Pipe

38 views
Skip to first unread message

James

unread,
Dec 21, 2022, 1:14:38 AM12/21/22
to Angular and AngularJS discussion
Hello,

I have my state change working in redux but the state change is not recognized by the async pipe.

Template:
<ng-container *ngIf="isSubmitting$ | async as post">{{
post.isSubmitting
}}</ng-container>

component:

isSubmitting$: Observable<RepsPostRequestInterface>;

constructor(private store: Store<AppStateInterface>) {
this.count$ = store.pipe(select(countSelector));
this.isSubmitting$ = store.pipe(select(postSelector));
}

Actions:
import { createAction, props } from '@ngrx/store';
import { RepsPostRequestInterface } from 'src/app/reps/types/reps-post-request.interface';

export const increment = createAction('[Reps Module] Increment');
export const decrement = createAction('[Reps Module] Decrement');
export const reset = createAction('[Reps Module] Reset');
export const submit = createAction('[Reps Module] Submit');

Reducers:
import { createReducer, on } from '@ngrx/store';
import { increment, decrement, reset, submit } from './reps.actions';
import { RepsStateInterface } from 'src/app/reps/types/reps-state.interface';

export const repsPostRequestInitialState = {
isSubmitting: false,
};
export const repsInitialState: RepsStateInterface = {
count: 0,
postRequest: repsPostRequestInitialState,
};

export const repsReducer = createReducer(
repsInitialState,
on(decrement, (state: RepsStateInterface) => {
let count: number = state.count + 1;
return count <= 0 ? { ...state, count: 0 } : { ...state, count: count };
}),
on(increment, (state: RepsStateInterface) => {
let count: number = state.count + 1;
return { ...state, count: count };
}),
on(reset, (state: RepsStateInterface) => ({ ...state, count: 0 })),
on(submit, (state: RepsStateInterface) => ({ ...state, isSubmitting: true }))
);

Selectors:

import { createSelector } from '@ngrx/store';
import { AppStateInterface } from 'src/app/shared/types/app-state.interface';

export const selectReps = (state: AppStateInterface) => state.reps;

export const countSelector = createSelector(selectReps, (state) => state.count);

export const postSelector = createSelector(
selectReps,
(state) => state.postRequest
);

Any help is much appreciated! The count is working 100% and the state is working fine in redux, but I can't render the is submitting boolean inside my post request!
Reply all
Reply to author
Forward
0 new messages