m2: introduce first reducer and selector

Author: alex-okrushko

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

src/app/app.module.ts

@@ -8,6 +8,9 @@ import { CartModule } from './cart/cart.module';
 import { MatToolbarModule, MatIconModule } from '@angular/material';
 import { ProductDetailsModule } from './product-details/product-details.module';
 import { CartDetailsModule } from './cart-details/cart-details.module';
+import {StoreModule} from '@ngrx/store';
+import {StoreDevtoolsModule} from '@ngrx/store-devtools';
+import { reducer } from './reducer';
 
 @NgModule({
   declarations: [AppComponent],
@@ -20,6 +23,8 @@ import { CartDetailsModule } from './cart-details/cart-details.module';
     ProductDetailsModule,
     MatIconModule,
     MatToolbarModule,
+    StoreModule.forRoot({products: reducer}),
+    StoreDevtoolsModule.instrument({maxAge: 50}),
   ],
   bootstrap: [AppComponent],
 })

src/app/home/home.component.ts

@@ -1,21 +1,15 @@
-import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Component } from '@angular/core';
 
 import { Product } from '../model/product';
-import { data } from '../services/product-data';
-import { ProductService } from '../services/product.service';
+import { Store } from '@ngrx/store';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
 })
-export class HomeComponent implements OnInit {
-  products$: Observable<Product[]>;
+export class HomeComponent {
+  products$ = this.store.select(state => state.products);
 
-  constructor(private readonly productService: ProductService) {}
-
-  ngOnInit() {
-    this.products$ = this.productService.getProducts();
-  }
+  constructor(private readonly store: Store<{ products: Product[] }>) {}
 }

src/app/reducer.ts

@@ -0,0 +1,11 @@
+import {Action} from '@ngrx/store';
+import {Product} from './model/product';
+import {data} from './services/product-data';
+
+type ProductState = Product[];
+const initState: ProductState = data;
+
+export function reducer(
+    state: ProductState = initState, action: Action): ProductState {
+  return state;
+}