Migrated breadcrumbs model to ngxs store

src/app/app.module.ts

@@ -5,7 +5,6 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { ComponentsModule } from './modules/components.module';
 import { StoreModule } from '@ngrx/store';
-import { breadcrumbReducer } from './core/reducers/breadcrumb.reducer';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { EffectsModule } from '@ngrx/effects';
 import { effects } from './core/effects';
@@ -28,9 +27,9 @@ import { FeedState } from './core/store/state/feed.state';
 import { ProcessState } from './core/store/state/process.state';
 import { ProductsState } from './core/store/state/products.state';
 import { environment } from 'src/environments/environment';
+import { BreadcrumbsState } from './core/store/state/breadcrumbs.state';
 
 const rootReducer = {
-  breadcrumbs: breadcrumbReducer,
   filters: filterReducer,
   router: fromRouter.routerReducer
 };
@@ -38,7 +37,8 @@ const rootReducer = {
 const states = [
   FeedState,
   ProcessState,
-  ProductsState
+  ProductsState,
+  BreadcrumbsState
 ];
 
 export function _configInitializer(conf: ConfigService) {
@@ -79,7 +79,7 @@ export function _basicAuthorizationInterceptorFactory(conf: ConfigService) {
     { provide: RouterStateSerializer, useClass: CustomSerializer },
     { provide: HTTP_INTERCEPTORS, useFactory: _basicAuthorizationInterceptorFactory, deps: [ConfigService], multi: true },
     // { provide: CatSearchService, useClass: CatSearchMockService }  // Uncomment if u want to use the CatSearchMockService
-     { provide: FeedService, useClass: FeedMockService } // Uncomment if u want to use the FeedMockService
+    { provide: FeedService, useClass: FeedMockService } // Uncomment if u want to use the FeedMockService
   ],
   bootstrap: [AppComponent]
 })

src/app/core/actions/breadcrumb.actions.ts

@@ -1,10 +0,0 @@
-import { Action } from '@ngrx/store';
-import { Breadcrumb } from '../models/breadcrumb.model';
-
-export const ADD_BREADCRUMB = 'ADD_BREADCRUMB';
-
-export class AddBreadcrumb implements Action {
-    type: string;
-
-    constructor(public payload: Breadcrumb) {}
-}

src/app/core/reducers/breadcrumb.reducer.ts

@@ -1,18 +0,0 @@
-import { Breadcrumb } from '../models/breadcrumb.model';
-import { ADD_BREADCRUMB } from '../actions/breadcrumb.actions';
-
-const initialBreadcrumbs = [
-    <Breadcrumb>{
-        name: 'Artikelsuche',
-        path: 'article-search'
-    }
-];
-
-export function breadcrumbReducer(breadcrumbs: Breadcrumb[] = initialBreadcrumbs, action: any) {
-    switch (action.type) {
-        case ADD_BREADCRUMB:
-            return [...breadcrumbs, action.payload];
-        default:
-            return breadcrumbs;
-    }
-}

src/app/core/store/actions/breadcrumb.actions.ts

@@ -0,0 +1,9 @@
+import { Breadcrumb } from '../../models/breadcrumb.model';
+
+export const ADD_BREADCRUMB = '[BREADCRUMB] Add';
+
+export class AddBreadcrumb {
+    static readonly type = ADD_BREADCRUMB;
+
+    constructor(public payload: Breadcrumb) {}
+}

src/app/core/store/state/breadcrumbs.state.ts

@@ -0,0 +1,29 @@
+import { Breadcrumb } from '../../models/breadcrumb.model';
+import { State, Selector, Action, StateContext } from '@ngxs/store';
+import { AddBreadcrumb } from '../actions/breadcrumb.actions';
+
+export class BreadcrumbsStateModel {
+    breadcrumbs: Breadcrumb[];
+}
+
+@State<BreadcrumbsStateModel>({
+    name: 'breadcrumbs',
+    defaults: {
+        breadcrumbs: []
+    }
+})
+export class BreadcrumbsState {
+    @Selector()
+    static getBreadcrumbs(state: BreadcrumbsStateModel) {
+        return state.breadcrumbs;
+    }
+
+    @Action(AddBreadcrumb)
+    add(ctx: StateContext<BreadcrumbsStateModel>, { payload }: AddBreadcrumb) {
+        const state = ctx.getState();
+        ctx.patchState({
+            ...state,
+            breadcrumbs: [...state.breadcrumbs, payload]
+        });
+    }
+}