I have implemented Redux with Angular 7, and I am successfully adding values to the state. However, I am unsure of how to subscribe to changes in the state.
Below is the code snippet that I have attempted:
Selectors
export const selectProfessionalLearningTeacherFeature =
createFeatureSelector<any>('professionalLearningTeacher');
export const selectProfessionalLearningTeachers =
createSelector(selectProfessionalLearningTeacherFeature, (state) => state.professionalLearningTeacher);
Sports Component
@Component({
selector: 'app-sports-practice',
templateUrl: './sports-practice.component.html',
styleUrls: ['./sports-practice.component.scss']
})
export class SportsPracticeComponent implements OnInit {
constructor(private fb: FormBuilder, private professionalLearningService: ProfessionalLearningService,private _store: Store<any>) {
this._store.select(selectProfessionalLearningTeachers)
.pipe(takeUntil(this._ngOnDestroy)).subscribe(item => {
console.log(item);
});
}
ngOnInit() { }
}
Here is my reducer component
const meta: any = '';
const ProfessionalLearningTeachers: any = '';
const INITIAL_STATE: any = {
meta,
ProfessionalLearningTeachers
}
export function ProfessionalLearningTeacherReducer() {
return function entityReducer(
state: any = INITIAL_STATE,
a: Action,
): any {
const action = a as EntityAPIAction;
if (!action.meta) {
return state;
}
let itemIndex = -1;
switch (action.type) {
case ProfessionalLearningTeacherApiActions.PROFESSIONAL_LEARNING_TEACHER_SAVE_SUCCEEDED:
return storeProfessionalLearning(state, action);
}
return state;
};
}
function storeProfessionalLearning(state, action): any {
return Object.assign({}, state, {
meta: action.meta,
ProfessionalLearningTeachers: action.payload,
});
}
The state diagram
https://i.sstatic.net/0ChJk.png
Console Output
https://i.sstatic.net/cchpT.png
https://i.sstatic.net/6hCOn.png
Reference
Listening to Redux State Changes in Angular (v5)