为什么在我执行添加操作时浏览器会崩溃?

时间:2018-08-25 16:06:43

标签: angular redux ngrx ngrx-store ngrx-effects

在容器中,我有这个。在ngOnit中,我得到所有披萨,然后单击onCreate()函数。比萨已同步添加,浏览器正在重新加载

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

这是动作文件:存在与模型相关的不同动作

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>

1 个答案:

答案 0 :(得分:1)

之所以会发生这种情况,是因为修改了其中一个文件后,您的Angular CLI实时重新加载了页面。由于您要将记录追加到db.json,因此也会导致重新加载。

要解决此问题,请将文件移至src目录之外,或完全禁用实时重新加载(我不知道您是否可以忽略文件)。