James
unread,Dec 21, 2022, 1:14:38 AM12/21/22Sign in to reply to author
Sign in to forward
You do not have permission to delete messages in this group
Sign in to report message as abuse
Either email addresses are anonymous for this group or you need the view member email addresses permission to view the original message
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!