为什么在我发送添加操作时浏览器会重新加载?
why the browser is reloding when i dispatch an add action?
在容器里我有这个。在 ngOnit 中,我得到所有的比萨饼,然后 xhen 单击 onCreate() Function 。披萨已添加,浏览器正在重新加载
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>
发生这种情况是因为您的 Angular CLI 在您的一个文件被修改时实时重新加载页面。因为您要将记录附加到 db.json
,这也会导致重新加载。
要解决此问题,请将文件移动到 src
目录之外,或完全禁用实时重新加载(我不知道您是否可以忽略文件)。
在容器里我有这个。在 ngOnit 中,我得到所有的比萨饼,然后 xhen 单击 onCreate() Function 。披萨已添加,浏览器正在重新加载
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>
发生这种情况是因为您的 Angular CLI 在您的一个文件被修改时实时重新加载页面。因为您要将记录附加到 db.json
,这也会导致重新加载。
要解决此问题,请将文件移动到 src
目录之外,或完全禁用实时重新加载(我不知道您是否可以忽略文件)。