В контейнере у меня есть это.В ngOnit я получаю все пиццы, затем нажимаю на функцию Create ().пицца добавлена и синхронизируется, браузер перезагружается
ngOnInit(): void {
this.pizza$ = this.store.select<any>(fromStore.getAllPizzas);
this.store.dispatch(new fromStore.LoadPizzas());
}
onCreate(event: Pizza) {
this.store.dispatch(new fromStore.CreatePizza(event));
}
this.is файл действия: есть различные действия, связанные с моделью
import { Action } from '@ngrx/store';
import { Pizza } from '../../../shared/models/pizza.model';
export const LOAD_PIZZAS = 'LOAD_PIZZAS';
export const LOAD_PIZZAS_FAIL = 'LOAD_PIZZAS_FAIL';
export const LOAD_PIZZAS_SUCCESS = 'LOAD_PIZZAS_SUCCESS';
export class LoadPizzas implements Action {
readonly type = LOAD_PIZZAS;
constructor() { }
}
export class LoadPizzasFail implements Action {
readonly type = LOAD_PIZZAS_FAIL;
constructor(public payload: any) { }
}
export class LoadPizzasSuccess implements Action {
readonly type = LOAD_PIZZAS_SUCCESS;
constructor(public payload: Pizza[]) { }
}
// create pizza
export const CREATE_PIZZA = '[Products] Create Pizza';
export const CREATE_PIZZA_FAIL = '[Products] Create Pizza Fail';
export const CREATE_PIZZA_SUCCESS = '[Products] Create Pizza Success';
export class CreatePizza implements Action {
readonly type = CREATE_PIZZA;
constructor(public payload: Pizza) {}
}
export class CreatePizzaFail implements Action {
readonly type = CREATE_PIZZA_FAIL;
constructor(public payload: any) {}
}
export class CreatePizzaSuccess implements Action {
readonly type = CREATE_PIZZA_SUCCESS;
constructor(public payload: Pizza) {}
}
export type PizzasAction =
LoadPizzas |
LoadPizzasFail |
LoadPizzasSuccess |
CreatePizza |
CreatePizzaFail |
CreatePizzaSuccess;
, и это контейнер HTML
<app-pizza-create (createPizzaEvent)="onCreate($event)">
</app-pizza-create>
<app-pizza-list [pizza$]="pizza$">
</app-pizza-list>