Angular / Redux --> store.select(s => s.incidents).subscribe((data) => {} 未定义

Question

我正在 Angular 中实现 Redux，但我遇到了一些麻烦。我正在努力从特定 component.ts 文件的列表中的 redux 存储中获取数据。在 store.select(s => s.incidentsNew).subscribe((incidents) => { this.incidentsNew = incidents; console.log(incidents); }); 中有 this.incidentsNew 和事件 undefined

这是我的示例代码：

事件列表。component.ts:

export class IncidentlistComponent implements OnInit {
  incidentsNew: Incident[];

  constructor(
    private http: HttpClient,
    private incidentService: IncidentService,
    private store: Store<AppState>
  ) {
    store.select(s => s.incidentsNew).subscribe((incidents) => {
      this.incidentsNew = incidents;
      console.log(incidents);
    });
  }

  ngOnInit(): void {
    this.loadData();
  }

  loadData(): void {
    this.incidentService.loadNewIncidents();
    console.log(this.incidentsNew);
  }

}

app.state.ts

export interface AppState {
  readonly incidentsNew: Incident[];
}

incident.reducer.ts

export function incidentReducer(state: Incident[] = [initialState], action: IncidentActions.Actions): Incident[] {
  switch (action.type) {
    case IncidentActions.SET_INCIDENT:
      return action.payload;
    default:
      return state;
  }
}

incident.actions.ts

export const ADD_INCIDENT = '[INCIDENT] Add';
export const REMOVE_INCIDENT = '[INCIDENT] Remove';

export const SET_INCIDENTS = '[INCIDENT] Set';

export class AddIncident implements Action {
  readonly type = ADD_INCIDENT;

  constructor(public payload: Incident) {}
}

export class RemoveIncident implements Action {
  readonly type = REMOVE_INCIDENT;

  constructor(public payload: number) {}
}

export class SetIncidents implements Action {
  readonly type = SET_INCIDENTS;
  constructor(public payload: Incident[]) {}
}

export type Actions = AddIncident | RemoveIncident | SetIncidents;

incident.service.ts

@Injectable({ providedIn: 'root' })
export class IncidentService {
  constructor(private http: HttpClient, private store: Store<AppState>) {
  }

  loadNewIncidents(): void{
    this.http.get<any>(`${environment.apiUrl}/incident/REGISTERED`).subscribe((data) => {
      this.store.dispatch(new IncidentActions.SetIncidents(data));
    });
  }
}

在 Redux Devtools 中，我看到它填充了正确的数据。仍然有问题有人有什么想法吗？

更新：

Answer 1

找到解决方案。在我的 app.state.ts 文件中，变量被命名为 incidentsNew。我不得不将其更改为 incident，因为它必须与我声明的模型相匹配。

Angular / Redux --> store.select(s => s.incidents).subscribe((data) => {} 未定义

Angular / Redux --> store.select(s => s.incidents).subscribe((data) => {} is UNDEFINED

angular

typescript

redux

redux-observable