feat: redux example

Author: marianocodes

angular.json

@@ -28,6 +28,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
             "scripts": []
@@ -123,6 +124,10 @@
           }
         }
       }
-    }},
-  "defaultProject": "vainilla-redux"
+    }
+  },
+  "defaultProject": "vainilla-redux",
+  "cli": {
+    "analytics": "515d87fe-f79a-4f2c-8200-99d4b51cfc99"
+  }
 }

package-lock.json

@@ -12,10 +12,13 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~10.0.0",
+    "@angular/cdk": "^10.0.1",
     "@angular/common": "~10.0.0",
     "@angular/compiler": "~10.0.0",
     "@angular/core": "~10.0.0",
+    "@angular/flex-layout": "^10.0.0-beta.32",
     "@angular/forms": "~10.0.0",
+    "@angular/material": "^10.0.1",
     "@angular/platform-browser": "~10.0.0",
     "@angular/platform-browser-dynamic": "~10.0.0",
     "@angular/router": "~10.0.0",

package.json

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { of, Observable } from 'rxjs';
+import { delay } from 'rxjs/operators';
+
+const data = [
+  '🍎',
+  '🍐',
+  '🧀',
+  '🍕',
+  '🍬',
+  '🥜',
+];
+
+@Injectable({ providedIn: 'root'})
+export class ApiService {
+
+  constructor() { }
+
+  public getItems(): Observable<string[]> {
+    return of(data).pipe(
+      delay(2000)
+    );
+  }
+
+}

src/app/api.service.ts

@@ -0,0 +1,58 @@
+import { Injectable } from '@angular/core';
+import { Store } from './store/store.service';
+import {
+  AddProduct,
+  RemoveProduct,
+  FilterCart,
+  GetList,
+  GetListSuccess,
+  GetListFail
+} from './store/actions/cart.actions';
+
+import { EMPTY, Subscription } from 'rxjs';
+import { ApiService } from './api.service';
+import { catchError, tap, map } from 'rxjs/operators';
+import { State } from './store/reducers';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AppState {
+
+  public cart$ = this.store.state.pipe(map((state) => state.cart));
+  public list$ = this.cart$.pipe(map((state) => state.list));
+  public items$ = this.cart$.pipe(map((state) => state.items));
+
+  constructor(
+    public store: Store<State>,
+    public api: ApiService
+  ) { }
+
+  public addProduct(product: string): void {
+    this.store.dispatch(new AddProduct(product));
+  }
+
+  public removeProduct(position: number): void {
+    this.store.dispatch(new RemoveProduct(position));
+  }
+
+  public filterList(product: string): void {
+    this.store.dispatch(new FilterCart(product));
+  }
+
+  public getProducts(): Subscription {
+    this.store.dispatch(new GetList());
+
+    const request$ =
+      this.api.getItems().pipe(
+        tap((result) => this.store.dispatch(new GetListSuccess(result))),
+        catchError(() => {
+          this.store.dispatch(new GetListFail('Error'));
+          return EMPTY;
+        })
+      );
+
+    return request$.subscribe();
+  }
+
+}