如何在reduce angular 7中订阅状态的更改值

Question

我正在使用角度7的redux。我可以将值添加到状态中。 但是我该如何订阅状态的更改值。

这是我尝试过的代码

选择

export const selectProfessionalLearningTeacherFeature =
  createFeatureSelector<any>('professionalLearningTeacher');

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

体育成分

@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() {  }

}

这是我的减速器组件

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,
  });
}

状态图

控制台输出

参考

在angular（v5）中如何监听我的应用程序Redux状态对象更改？

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

Answer 1

你可以使用选择器 。

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));
  }
}

请注意：

• IAppState指的是您所在州的类型，不确定您的州是什么，请更改它。
• 您使用的是任何类型，而不是特定的类型，我也用它来进行说明，但是请注意，这不是一个好习惯，您应避免使用任何
• 您不应该使用大写开始状态道具，如'ProfessionalLearningTeachers'