时间戳

首页 > 解决方案 > ngrx 商店选择总是给未定义

angular - ngrx 商店选择总是给未定义

问题描述

我是 Angular 6 的新手，我正在尝试使用 ngrx store select 获取数据。

购物车.model.ts

export class Cart {
  ShoppingCart: ShoppingCart;
  Callbacks: Callbacks;
}
export class Callbacks {
  CallbackURL: string;
  CallbackURLInEmail: string;

  constructor() {
    this.CallbackURL = undefined;
    this.CallbackURLInEmail = undefined;
  }
}

export class ShoppingCartTotal {
  Amount: Amount;
  Currency: string;
  NumberofItems: NumberofItems;
}

export class ShoppingCart {
  ShoppingCartTotal: ShoppingCartTotal;
  ShoppingCartItems: ShoppingCartItems;

  constructor() {
    this.ServiceFees = undefined;
    this.ShoppingCartTotal = undefined;
  }
}
export class ShoppingCartItem {
  Type: string;
  PassengerID: PassengerID;
  ShoppingCartItemID: ShoppingCartItemID;
  Quantity: Quantity;
}

动作.ts

import { Action } from '@ngrx/store';
import { Cart } from '@app/shared/models';

export enum ShoppingCartActionTypes {
  SHOPPINGCART_DEFAULT = '[Cart] Load Default Shopping Cart',
  SHOPPINGCART_ADD = '[Cart] Add Shopping Cart',
  SHOPPINGCART_UPDATE = '[Cart] Update Shopping Cart',
  SHOPPINGCART_DELETE = '[Cart] Delete Shopping Cart'
}

export class DeleteCartAction implements Action {
  readonly type = ShoppingCartActionTypes.SHOPPINGCART_DELETE;
  constructor(public payload?: any) {}
}

export class LoadCartDefaultAction implements Action {
  readonly type = ShoppingCartActionTypes.SHOPPINGCART_DEFAULT;
  constructor(public payload?: Cart) {}
}
export class LoadCartAddAction implements Action {
  readonly type = ShoppingCartActionTypes.SHOPPINGCART_ADD;
  constructor(public payload?: Cart) {}
}

export class UpdateCartAction implements Action {
  readonly type = ShoppingCartActionTypes.SHOPPINGCART_UPDATE;
  constructor(public payload: Cart) {}
}

export type ShoppingCartActionsUnion =
  | LoadCartDefaultAction
  | UpdateCartAction
  | LoadCartAddAction
  | DeleteCartAction;

减速器.ts

import * as cloneDeep from 'lodash/cloneDeep';
import { Action } from '@ngrx/store';
import {
  ShoppingCartActionTypes,
  ShoppingCartActionsUnion
} from '../actions/createshoppingcart.actions';
import { Cart } from '@app/shared/models';

export interface CartState {
  Cart: Cart;
}

export const initialState: CartState = {
  Cart: new Cart()
};

export function Cartreducer(
  state = initialState,
  action: ShoppingCartActionsUnion
): CartState {
  let update = getClone(state.Cart);
  switch (action.type) {
    case ShoppingCartActionTypes.SHOPPINGCART_DEFAULT: {
      return initialState;
    }
    case ShoppingCartActionTypes.SHOPPINGCART_UPDATE: {
      update = action.payload;
      return {
        ...state,
        Cart: action.payload
      };
    }
    case ShoppingCartActionTypes.SHOPPINGCART_DELETE: {
      return initialState;
    }

    case ShoppingCartActionTypes.SHOPPINGCART_ADD: {
      return {
        ...state,
        Cart: action.payload
      };
    }
    default: {
      return state;
    }
  }
}

export function getClone(trip: Cart): Cart {
  let clone = cloneDeep(trip);
  return clone;
}

索引.ts

import {
  ActionReducerMap,
  combineReducers,
  compose,
  createSelector,
  createFeatureSelector,
  ActionReducer,
  MetaReducer
} from '@ngrx/store';
import { environment } from '@env/environment';
import * as shoppingCartreducer from './createshoppingcart.reducer';
import * as fromRouter from '@ngrx/router-store';

export interface State {
  shoppingCart: shoppingCartreducer.CartState;
}

export const reducers: ActionReducerMap<State> = {
  shoppingCart: shoppingCartreducer.Cartreducer
};

state.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { StoreModule, Store } from '@ngrx/store';
import { Cartreducer, CartState } from './reducers/createshoppingcart.reducer';

@NgModule({
  imports: [StoreModule.forRoot({ categories: Cartreducer })],
  declarations: []
})
export class AppStateModule {}

登录组件.ts

import { Component, OnInit } from '@angular/core';
import { APIService } from '../backend/api/api.service';
import { Observable } from 'rxjs/Observable';
import { Store } from '@ngrx/store';
import { Cart } from 'app/shared/models';
import * as shoppingCartAction from 'app/state/actions/createshoppingcart.actions';
import * as fromRoot from '@app/state/reducers';
import { CartState } from '@app/state/reducers/createshoppingcart.reducer';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [APIService]
})
export class LoginComponent implements OnInit {
  testData: any;
  // testData: Observable<any>;
  constructor(
    private apiService: APIService,
    private store: Store<CartState>
  ) {}
  ngOnInit() {
    this.getConfiguration();
  }

  private getConfiguration() {
    this.apiService
      .createCartWorkarea(this.queryParam, 'test')
      .subscribe(response => {
        this.updateCart(response);
        this.testData = this.store.select('Cart');
        console.log('testData', this.testData);
      }),
      error => {
        console.log('response', error);
      };
  }

  updateCart(response) {
    this.store.dispatch(new shoppingCartAction.LoadCartAddAction(response));
  }
}

我正在尝试将ngrx v4 实施到我的角度项目中，并努力从ngrx 商店获取数据。我编写了 Actions、Reducer 并尝试选择调度的值但总是未定义我尝试了多种方法来解决问题但我仍然得到在此处输入图像描述

标签： angularngrx-store

解决方案

得到了解决方案。问题出在

forRoot StoreModule.forRoot({ cartreducerkey:  Cartreducer }) and  
     this.store.select('cartreducerkey').subscribe(data => {
            console.log(data),
             this.testData = data
           });

推荐阅读