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

Question

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

所有libs都应该是最新的(在过去几周内(。

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

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

在我的组件中，我需要什么来订阅来自状态的事件(我认为这是我需要做的(以获得更新的数据(竞赛(。

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

在这一点上，我；我刚刚从教程中复制了一些代码，请随时指出你发现的任何其他问题(例如未成功的代码(

竞争对手账户.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;

竞争对手-制造商

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

竞争对手组件.ts当html表单发生更改时，saveContest((函数会从另一个函数中正确调用。

我想我需要添加"；某事"；要订阅的组件的ngOnInit((和存储发出的事件？这正是我需要帮助的地方。

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

Answer 1

商店是被动的。如果您更改了商店中的某些内容，所有订阅者都会收到此更改的通知。要读取存储数据，可以使用选择器。

Answer 2

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