angular NGRX this.subscription=this.store.select() execute 2 times

I am new in Angular using NGRX and I am doing and example.

I have Product.Action.ts like this

import { createAction, props } from "@ngrx/store"
import { Products } from "../model/productmodel";

export const LOAD_PRODUCTS= '[product] load products'
export const LOAD_PRODUCTS_SUCCESS= '[product] load products success'
export const LOAD_PRODUCTS_FAILURE= '[product] load products fail'

export const loadProducts=createAction(LOAD_PRODUCTS) ;
export const loadProductsSucess=createAction(LOAD_PRODUCTS_SUCCESS,props<{listroducts[]}>()) ;
export const loadProductsfail=createAction(LOAD_PRODUCTS_FAILURE,props<{errormessage:string}>()) ;


Product.Effect.ts

import { Injectable } from "@angular/core";
import { Actions, createEffect, ofType } from "@ngrx/effects";

@Injectable()
export class ProductEffect{
constructor(private action$:Actions, private serviceroductService, private toastr:ToastrService){}

_loadproduct=createEffect(()=>
this.action$.pipe(
ofType(loadProducts),
exhaustMap((action)=>{
return this.service.GetAll().pipe(

map((data)=>{

return loadProductsSucess({list:data})
}),
catchError(
(err)=>of(this.Showalert(err.message,'fail'))
)
)
})
)
)
}


Product.Reducer.ts

import { createReducer,on } from "@ngrx/store";
import { productState } from "./Product.state";

const _productReducers=createReducer(productState,
on(loadProductsSucess,(state,action)=>{
return {
...state,
list:action.list,
errormessage:''
}
}),
on(loadProductsfail,(state,action)=>{
return {
...state,
list:[],
errormessage:action.errormessage
}
}),
)

export function ProductReducer(state:any, action:any){
return _productReducers(state,action);
}


Product.Select.ts

import { createFeatureSelector, createSelector } from "@ngrx/store";
import { ProductModel } from "../model/ProductStatemodel";


const getProductstate = createFeatureSelector<ProductModel>('product');

export const getproductlist = createSelector(getProductstate,(state)=>{
return state.list;
})


export const getproduct = createSelector(getProductstate,(state)=>{
return state.editdata;
})


Product.state.ts

import { ProductModel } from "../model/ProductStatemodel";

export const productStateroductModel={
list: [],
errormessage: "",
editdata:{
id:0,
name:"",
description:"",
price:0,
status:false
}
}


in App.config.ts

import { ProductReducer } from './_store/Product.Reducer';
import { ProductEffect } from './_store/Product.Effects';

provideStore({'product'roductReducer}),
provideStore({'product'roductReducer}),
provideEffects(ProductEffect), provideStoreDevtools({ maxAge: 25, logOnly: !isDevMode() })


In the component

export class NewproductComponent implements OnDestroy{
subscription!:Subscription;
constructor(private dialog:MatDialog, private store:Store){

}
ngOnDestroy(): void {
this.subscription.unsubscribe();
}

ngOnInit(): void {
this.Loadproducts();
}

Loadproducts(){
this.store.dispatch(loadProducts());
this.subscription=this.store.select(getproductlist).subscribe(item=>{
console.log("Enter 1")

this.productlist=item;
this.dataSource=new MatTableDataSource(this.productlist);
this.dataSource.paginator=this.paginator;
this.dataSource.sort=this.sort;
})
}
}


Everything works fine...

The problem I have is that this.subscription=this.store.select(getproductlist).subscribe is executed twice.

I read that I have to add skip(1)

I do not know where I have to add it...

Any idea?

Thanks

Continue reading...