Я пытаюсь использовать ngrx / store в приложении Angular, чтобы удалить множество текущих HTTP-запросов и создать состояние приложения.
Все библиотеки должны быть обновлены ( в течение последних нескольких недель).
У меня есть компонент контеста, который показывает контест. Другой экземпляр компонента конкурса может изменить конкурс, и я хочу отразить это в любых других компонентах, которые также показывают тот же конкурс.
Итак, если конкурс изменяется в одном компоненте, я хочу, чтобы это было обновлено в магазине и любые другие компоненты, которые ссылаются на конкурс, должны получить обновленные данные конкурса.
Что мне нужно в моем компоненте, чтобы подписаться на событие из состояния (что, как я полагаю, это то, что мне нужно сделать) чтобы получить обновленные данные (конкурс).
Я планирую добавить Эффект позже, чтобы управлять обновлением на бэкэнде, пока я просто пытаюсь заставить работать FE, поэтому его здесь нет.
На этом этапе я только что скопировал фрагменты кода из руководств, не стесняйтесь указывать на любые другие обнаруженные вами проблемы (например, неправильный код)
contest-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;
contest-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);
}
contest-component.ts Функция saveContest () правильно вызывается из другой функции, если форма html - c
Я предполагаю, что мне нужно добавить «что-то» в ngOnInit () компонента, на который будет подписываться и событие, генерируемое хранилищем? Вот с чем мне нужна помощь.
private saveContest(): void {
this.store.dispatch(new UpdateContest({contest: this.contest}));
}