我应该如何检测组件中的 NGRX 状态事件？

Question

我正在尝试在 Angular 应用程序中使用 ngrx/store 来删除当前正在发生的大量 http 请求并创建应用程序状态。

所有库都应该是最新的（在过去几周内）。

我有一个显示比赛的比赛组件。比赛组件的另一个实例可能会改变比赛，我想在也显示相同比赛的任何其他组件中反映这一点。

因此，如果比赛在一个组件中发生变化，我希望在商店中更新该组件，并且引用比赛的任何其他组件都应该获得更新的比赛数据。

我的组件需要什么来订阅来自状态的事件（我认为这是我需要做的）以获取更新的数据（竞赛）。

我计划稍后添加一个 Effect 来管理对后端的更新，目前我只是想让 FE 正常工作，这就是为什么它没有在这里列出的原因。

此时我刚刚从教程中复制了一些代码，请随时指出您发现的任何其他问题（例如不必要的代码）

竞赛-action.ts

export enum ContestActionTypes {
 AddContest = '[Contest] Create Contest',
 UpdateContest = '[Contest] Update Contest',
}

export class CreateContest implements Action {
  readonly type = ContestActionTypes.AddContest;

  constructor(public payload: { contest: Contest }) {
  }
}

export class UpdateContest implements Action {
  readonly type = ContestActionTypes.UpdateContest;

  constructor(public payload: { contest: Contest }) {
  }
}

export type ContestActions =
  CreateContest
  | UpdateContest;

竞赛-reducer.ts

export interface ContestState extends EntityState<Contest> {
  allContestsLoaded: boolean;
}

export const adapter: EntityAdapter<Contest> =
  createEntityAdapter<Contest>({});


export const initialContestState: ContestState =
  adapter.getInitialState({
    allContestsLoaded: false
  });


export function contestReducer(state = initialContestState,
                               action: ContestActions): ContestState {
  switch (action.type) {
    case ContestActionTypes.AddContest: {
      return adapter.addOne(action.payload.contest, state);
    }
    case ContestActionTypes.UpdateContest: {
      console.log(`contestReducer.UpdateContest payload: ` + action.payload.contest);
      return adapter.updateOne(
        {id: action.payload.contest.id, changes: action.payload.contest},
                state);
    }
    default: {
      return state;
    }
  }

  return contestReducer(state, action);
}

竞赛-component.ts 当 html 表单更改时，从另一个函数正确调用 saveContest() 函数。

我猜我需要向组件的 ngOnInit() 添加“东西”以订阅商店发出的事件？这正是我需要帮助的地方。

private saveContest(): void {
    this.store.dispatch(new UpdateContest({contest: this.contest}));

}

Answer 1

这家商店是被动的。如果您在商店中更改某些内容，所有订阅者都会收到此更改的通知。要读取商店数据，您可以使用 selectors.

Answer 2

您需要为此使用 ngrx 选择器。 https://ngrx.io/guide/store/selectors

我应该如何检测组件中的 NGRX 状态事件？

How should I detect NGRX state event in a component?

angular

ngrx

ngrx-store