Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import { Routes, RouterModule } from '@angular/router';
- import { RegisterComponent } from './pages/user/register/register.component';
- import { LoginComponent } from './pages/user/login/login.component';
- import { PageNotFoundComponent } from './shared/components/page-not-found/page-not-found.component';
- const routes: Routes = [
- {
- path: '',
- redirectTo: 'login',
- pathMatch: 'full'
- },
- {
- path: 'login',
- component: LoginComponent
- },
- {
- path: 'products',
- loadChildren: './pages/products/products.module#ProductsModule'
- },
- {
- path: 'register',
- component: RegisterComponent
- },
- { path: '**', component: PageNotFoundComponent }
- ];
- @NgModule({
- imports: [RouterModule.forRoot(routes)],
- exports: [RouterModule]
- })
- export class AppRoutingModule {}
- Product actions:
- import { Action } from '@ngrx/store';
- import { Product } from '../../../shared/models/products.model';
- export const GET_PRODUCT = '[PRODUCT] Get Product';
- export const GET_PRODUCTS = '[PRODUCT] Get Products';
- export const ADD_CART = '[CART] Add Cart';
- export const REMOVE_CART = '[CART] Add Cart';
- export const ADD_FAV = '[FAV] Add Fav';
- export const REMOVE_FAV = '[FAV] Remove Fav';
- // export const getProducts = createAction ('[PRODUCT] Get Products', props<{products: Product[]}>());
- // export const getProduct = createAction ('[PRODUCT] Get Product', props<{products: Product}>());
- export class GetProducts implements Action {
- public readonly type = GET_PRODUCTS;
- constructor(public payload: Product[]) {}
- }
- export class GetProduct implements Action {
- public readonly type = GET_PRODUCT;
- constructor(public payload: Product) {}
- }
- export class AddCart implements Action {
- public readonly type = ADD_CART;
- constructor(public payload: Product) {}
- }
- export class RemoveCart implements Action {
- public readonly type = REMOVE_FAV;
- // Since we need to remove a particular product we need to pass the index
- constructor(public payload: number) {}
- }
- export type ProductActions = GetProducts | AddCart | RemoveCart | GetProduct;
- product reducer
- // Takes the incoming action and decide what to do with it
- import * as AllProductActions from '../actios/product-actions';
- import { ProductState, InitialProductState } from '../state/product.state';
- export function productReducers(
- state = InitialProductState,
- action: AllProductActions.ProductActions
- ) {
- switch (action.type) {
- case AllProductActions.GET_PRODUCT:
- return { ...state, products: action.payload };
- }
- }
- App.state
- import { Product } from './../../models/products.model';
- export interface AppState {
- readonly product: Product[];
- }
- // export const InitialAppState: AppState = {
- // products: InitialProductState
- // };
- // export function getInitialState(): AppState {
- // return InitialAppState;
- // }
- Product State:
- import { Product } from '../../../shared/models/products.model';
- export interface ProductState {
- products: Product[];
- selectedProduct: Product;
- }
- export const InitialProductState: ProductState = {
- products: null,
- selectedProduct: null
- };
- Product Service
- import { Injectable, Inject } from '@angular/core';
- import { HttpClient } from '@angular/common/http';
- import { Observable } from 'rxjs';
- import {shareReplay} from 'rxjs/operators';
- import { tap } from 'rxjs/operators';
- import { Product } from './../models/products.model';
- import { environment } from '../../../environments/environment';
- import { ProductActions } from './../store/actios/product-actions';
- @Injectable()
- export class ProductsService {
- constructor( private httpClient: HttpClient) {
- }
- getProducts(): Observable<any> {
- return this.httpClient.get(`${environment.services["get-products"]}`).pipe(
- shareReplay(1)
- )
- }
- }
- Products component:
- import { Product } from './../../../shared/models/products.model';
- import { Observable } from 'rxjs';
- import { GetProducts, GetProduct } from './../../../shared/store/actios/product-actions';
- import { AppState } from './../../../shared/store/state/app.state';
- import { Component, OnInit } from '@angular/core';
- import { ProductsService } from './../../../shared/services/products.service';
- import { Store, select } from '@ngrx/store';
- import { selectProductList } from 'src/app/shared/store/selectors/product.selector';
- @Component({
- selector: 'hero-products',
- templateUrl: './products.component.html',
- styleUrls: ['./products.component.scss']
- })
- export class ProductsComponent implements OnInit {
- products: Observable<Product[]>;
- constructor(private svc: ProductsService, private store: Store<AppState>) { }
- ngOnInit() {
- this.svc.getProducts().subscribe(data => {
- this.products = data;
- });
- }
- viewProduct(product: Product) {
- this.store.dispatch(new GetProduct(product));
- }
- }
- View product:
- import { Product } from './../../../shared/models/products.model';
- import { GetProduct } from './../../../shared/store/actios/product-actions';
- import { Component, OnInit } from '@angular/core';
- import { Store } from '@ngrx/store';
- import { AppState } from './../../../shared/store/state/app.state';
- import { Observable } from 'rxjs';
- @Component({
- selector: 'hero-view-product',
- templateUrl: './view-product.component.html',
- styleUrls: ['./view-product.component.scss']
- })
- export class ViewProductComponent implements OnInit {
- private subscription: any;
- selectedProduct: Observable<Product[]>;
- constructor(private _store: Store<AppState>) { }
- ngOnInit() {
- this._store.select('product').subscribe(data=> {
- console.log(data) ;
- });
- console.log(this.selectedProduct, 'kk')
- // this.subscription = this._store
- // .select()
- // .subscribe(people => {
- // console.log(people, 'ppppppp');
- // this.selectedProduct = people;
- // });
- }
- }````
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement