working to migrate from ngrx to ngxs

package.json

@@ -23,6 +23,7 @@
     "@ngrx/router-store": "^7.1.0",
     "@ngrx/store": "^7.0.0",
     "@ngrx/store-devtools": "^7.1.0",
+    "@ngxs/store": "^3.3.4",
     "core-js": "^2.5.4",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",
@@ -34,6 +35,8 @@
     "@angular/cli": "~7.2.1",
     "@angular/compiler-cli": "~7.2.0",
     "@angular/language-service": "~7.2.0",
+    "@ngxs/devtools-plugin": "^3.3.4",
+    "@ngxs/logger-plugin": "^3.3.4",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",

src/app/app.module.ts

@@ -25,6 +25,9 @@ import { ProductCardComponent } from './components/product-card/product-card.com
 import { ConfigService } from './core/services/config.service';
 import { ProductDetailsComponent } from './components/product-details/product-details.component';
 import { FeedServiceModule, FeedService, FeedMockService } from 'feed-service';
+import { NgxsModule } from '@ngxs/store';
+import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
+import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
 
 const rootReducer = {
   processes: processReducer,
@@ -63,6 +66,9 @@ export function _basicAuthorizationInterceptorFactory(conf: ConfigService) {
     StoreDevtoolsModule.instrument({
       maxAge: 25
     }),
+    NgxsModule.forRoot(),
+    NgxsReduxDevtoolsPluginModule,
+    NgxsLoggerPluginModule,
     CatServiceModule.forRoot('https://catsearch.paragon-data.de'),
     FeedServiceModule.forRoot('')
   ],

src/app/components/dashboard/dashboard.component.ts

@@ -1,9 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { Store } from '@ngrx/store';
-import { AppState } from 'src/app/app.state';
 import { Observable } from 'rxjs';
+import { Store, Select } from '@ngxs/store';
 import { FeedCard } from 'src/app/core/models/feed-card.model';
-import { FeedService } from 'feed-service';
+import { FeedService, FeedDTO } from 'feed-service';
 
 @Component({
   selector: 'app-dashboard',
@@ -15,19 +14,13 @@ export class DashboardComponent implements OnInit {
   feed$: Observable<FeedCard[]>;
   feed: FeedCard[];
   constructor(
-    private store: Store<AppState>,
+    private store: Store,
     private feedService: FeedService
     ) { }
 
   ngOnInit() {
-     // this.store.dispatch(new LoadFeed());
-     this.feed$ = this.store.select('feed');
-     this.feed$.subscribe(
-      (data: any) => this.feed = data
-     );
-     this.feedService.info().subscribe(
-       (data: any) => console.log(data)
+     this.store.select(state => state.feed.feed).subscribe(
+       (feed: FeedDTO[]) => console.log(feed)
      );
   }
-
 }

src/app/core/actions/feed.actions.ts

@@ -1,24 +0,0 @@
-import { Action } from '@ngrx/store';
-import { FeedDTO } from 'feed-service';
-
-export const LOAD_FEED = 'LOAD_FEED';
-export const LOAD_FEED_SUCCESS = 'LOAD_FEED_SUCCESS';
-export const LOAD_FEED_FAIL = 'LOAD_FEED_FAIL';
-
-export class LoadFeed implements Action {
-    readonly type = LOAD_FEED;
-
-    constructor() {}
-}
-
-export class LoadFeedSuccess implements Action {
-    readonly type = LOAD_FEED_SUCCESS;
-
-    constructor(public payload: FeedDTO) {}
-}
-
-export class LoadFeedFail implements Action {
-    readonly type = LOAD_FEED_FAIL;
-
-    constructor(public payload: string) {}
-}

src/app/core/effects/feed.effect.ts

@@ -1,27 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Actions, Effect, ofType } from '@ngrx/effects';
-import { FeedService, FeedDTO } from 'feed-service';
-import { LoadFeed, LOAD_FEED, LoadFeedSuccess } from '../actions/feed.actions';
-import { switchMap, map } from 'rxjs/operators';
-
-@Injectable()
-export class FeedEffects {
-    constructor(
-        private action$: Actions,
-        private feedService: FeedService
-    ) { }
-
-    // @Effect()
-    // loadFeed = this.action$.pipe(
-    //    ofType<LoadFeed>(LOAD_FEED),
-    //    switchMap(() => {
-    //        console.log('test ');
-    //        return this.feedService.info().pipe(
-    //            map(feed => {
-    //                console.log(feed);
-    //                return new LoadFeedSuccess(<FeedDTO>{});
-    //            })
-    //        );
-    //    })
-    // );
-}

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

@@ -1,6 +1,6 @@
 import { FeedCard } from '../models/feed-card.model';
 import { feedMock } from 'mocks/feed.mock';
-import { LOAD_FEED, LOAD_FEED_SUCCESS, LOAD_FEED_FAIL } from '../actions/feed.actions';
+import { LOAD_FEED, LOAD_FEED_SUCCESS, LOAD_FEED_FAIL } from '../store/actions/feed.actions';
 
 export function feedReducer(feed: FeedCard[] = feedMock, action: any) {
     switch (action.type) {

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

@@ -0,0 +1,12 @@
+import { Action } from '@ngrx/store';
+import { FeedDTO } from 'feed-service';
+
+export const LOAD_FEED = '[FEED] Load';
+export const LOAD_FEED_SUCCESS = 'LOAD_FEED_SUCCESS';
+export const LOAD_FEED_FAIL = 'LOAD_FEED_FAIL';
+
+export class LoadFeed implements Action {
+    readonly type = LOAD_FEED;
+
+    constructor(public payload: FeedDTO[]) {}
+}

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

@@ -0,0 +1,30 @@
+import { FeedDTO } from 'feed-service';
+import { State, Selector, Action, StateContext } from '@ngxs/store';
+import { LoadFeed } from '../actions/feed.actions';
+import { load } from '@angular/core/src/render3';
+import { feedMock } from 'mocks/feed.mock';
+
+export class FeedStateModel {
+    feed: FeedDTO[];
+}
+
+@State<FeedStateModel>({
+    name: 'feed',
+    defaults: {
+        feed: []
+    }
+})
+export class FeedState {
+    @Selector()
+    static getFeed(state: FeedStateModel) {
+        return state.feed;
+    }
+
+    @Action(LoadFeed)
+    load(ctx: StateContext<FeedStateModel>, { payload }: LoadFeed) {
+        const state = ctx.getState();
+        ctx.patchState({
+            feed: [...payload]
+        });
+    }
+}

yarn.lock

@@ -348,6 +348,27 @@
     tree-kill "1.2.0"
     webpack-sources "1.2.0"
 
+"@ngxs/devtools-plugin@^3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@ngxs/devtools-plugin/-/devtools-plugin-3.3.4.tgz#7836ddb94245a8f5bd5137599c66a1a8aea31993"
+  integrity sha512-gwVbK+utZlikIJ1wOC8WuOqAjB3t55J4LYiN9VwSxntvnXEAe+J2PQrnvK0e/C9df8HAbytGK2Jbisg00QO/ew==
+  dependencies:
+    tslib "^1.9.0"
+
+"@ngxs/logger-plugin@^3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@ngxs/logger-plugin/-/logger-plugin-3.3.4.tgz#74d7e56e7577d56206e25e36ce48d79c5ba99ca8"
+  integrity sha512-e2lbWZdPlMaOuESVitppkmqG4c/v3N885HQqcyVZNLFl8hZd4+XnKFBqCdO95zvfWeRc/nMXhb+3fC/AaQVIBA==
+  dependencies:
+    tslib "^1.9.0"
+
+"@ngxs/store@^3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@ngxs/store/-/store-3.3.4.tgz#dced015eedf054bc651bbc1b67b590287cec7437"
+  integrity sha512-99J2/+Tg/yoq+Fs9mfC6bgGnywV85TLIBkO8DWVN6mPVh2DQ6WlsxgvJjZcp0J5Uw8v5+uKsTit6OXeDxO5VOw==
+  dependencies:
+    tslib "^1.9.0"
+
 "@schematics/angular@7.2.2":
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-7.2.2.tgz#5a466ebbbd7e1fbb13851f26446ec308b822d1dc"