0

I am using redux with angular 7. I am able to add the value to the state. But how can I subscribe the change value of the state.

Here is the code that I tried

Selector

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

state diagram

Output of console

anonymous

error message

reference

In angular (v5) how do I listen to my apps Redux state object changing?

https://github.com/angular-redux/store/blob/master/articles/select-pattern.md

San Jaisy
  • 15,327
  • 34
  • 171
  • 290

1 Answers1

0

You could use a selector.

professionalLearningTeacher.selectors.ts:

import { createFeatureSelector, createSelector } from '@ngrx/store';

export const selectProfessionalLearningTeacherFeature =
  createFeatureSelector<ProfessionalLearningTeacherState | any>('professionalLearningTeacher');
// 'professionalLearningTeacher' is bad practice, this should be a const

export const selectProfessionalLearningTeachers =
  createSelector(selectProfessionalLearningTeacherFeature, (state) => state.professionalLearningTeachers);

portsPracticeComponent.ts:

@Component({
  selector: 'app-sports-practice',
  templateUrl: './sports-practice.component.html',
  styleUrls: ['./sports-practice.component.scss']
})
export class SportsPracticeComponent implements OnInit {
  professionalLearningTeachers$: Observable<any>;

  constructor(
    private _store: Store<IAppState>
  ) {

  }

  ngOnInit() {
    this.professionalLearningTeachers =  this._store.select(selectProfessionalLearningTeachers)
    .pipe(takeUntil(this._ngOnDestroy));
  }
}

Please note:

  • IAppState refers to the type of your state, not sure what is yours, please change it.
  • You are using any instead of specific types, I used it too for the explanation, but know that this is not good practice, your should avoid using any
  • You should not start a state prop with an upper case, as in 'ProfessionalLearningTeachers'
MCMatan
  • 8,623
  • 6
  • 46
  • 85
  • I tried your code it's really useful, but I am getting errors as above. Can you please let me know what the mistake I am doing. – San Jaisy Mar 17 '19 at 00:50
  • It's probably because your types are wrong when creating the store. You have to have KEY for each feature state. Please read this: https://github.com/ngrx/platform/blob/master/docs/store/selectors.md – MCMatan Mar 17 '19 at 08:44
  • Yes it worked but with this method - @select('professionalLearningTeacher') professionalLearningTeacher$; I am still not able to do with your approach I like your approach – San Jaisy Mar 20 '19 at 01:28