why the browser is reloding when i dispatch an add action?

Question

In the container I have this. In the ngOnit I get all pizzas then xhen clicking onCreate() Function . the pizza is addedd synch an the browser is reloading

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 the action file : there ist the diferents actions related to trhe model

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;

and this is the container HTML

 <app-pizza-create (createPizzaEvent)="onCreate($event)">
 </app-pizza-create>
 <app-pizza-list [pizza$]="pizza$">
 </app-pizza-list>

Answer 1

This happens because your the Angular CLI live reloads the page when one of your files is modified. Because you're appending a record to db.json, this will also cause a reload.

To fix this move the file to outside the src directory, or disable live reloading completely (I don't know if you can ignore files).