Ngrx 选择返回未定义答案

【问题标题】：Ngrx select return undefinedNgrx 选择返回未定义
【发布时间】：2021-07-08 16:31:41
【问题描述】：

我有这个项目，我正在实施 ngrx 来处理状态，我是新手，到目前为止我已经设法创建状态和减速器，但是当我尝试进行选择时，它返回未定义。这是我的代码：

这是动作文件

import { Action, createAction } from '@ngrx/store'
import { ProductCart } from './../models/productCarts.model'

export const ADD_PRODUCTCART = 'Add ProductCart';
export const UPDATE_PRODUCTCART = 'Update ProductCart';

export class AddProductCart implements Action {
  readonly type = ADD_PRODUCTCART
  constructor(public payload: ProductCart) { }
}

export class UpdateProductCart implements Action {
    readonly type = UPDATE_PRODUCTCART
    constructor(public payload: ProductCart) { }
  }

export type Actions = UpdateProductCart | AddProductCart;

这是我的减速器

import { ProductCart } from './../models/productCarts.model';
import * as ProductCartActions from './counter.actions';

const initialState: ProductCart[] = [];

export function taskReducer(
  state: ProductCart[] = initialState,
  action: ProductCartActions.Actions
) {
  switch (action.type) {
    case ProductCartActions.ADD_PRODUCTCART:
      return [...state, action.payload];
    case ProductCartActions.UPDATE_PRODUCTCART:
      let index = state.map(review => review.id).indexOf(action.payload.id);
      return [
          ...state.slice(0, index),
          Object.assign({}, state[index], {
            quantity: action.payload.quantity
          }),
          ...state.slice(index + 1)
      ];
    default:
      return state;
  }
}

我的应用状态

import { ProductCart } from './productCarts.model';

export interface AppState {
  readonly productCart: ProductCart[];
}

最后是我的组件

task: Observable<ProductCart[]>;
  constructor(
    private productService: ProductService,
    private store: Store<AppState>
  ) {
    this.task = this.store.select<any>('productCart');
this.task.suscribe(x => console.log(x)) //undefined

还有我的 app.module.ts

import { taskReducer } from './shared/ngrx/counter.reducer';
import { StoreModule } from '@ngrx/store';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatIconModule,
    StoreModule.forRoot({tasks: taskReducer}),

【问题讨论】：

要调试，请执行this.store.subscribe(state => console.log(state)) 以查看商店的结构。我敢打赌productCart 不会在那里，这就是你变得不确定的原因。

标签： angular ngrx ngrx-store

【解决方案1】：

StoreModule.forRoot 需要一个 ActionReducerMap<AppState>，所以在这里导出一个，包括你的 productCart 减速器

import { ProductCart } from './productCarts.model';
import { taskReducer } from './shared/ngrx/counter.reducer';

export interface AppState {
  readonly productCart: ProductCart[];
}

//export all reducers for app.module.ts StoreModule.forRoot
export const reducers: ActionReducerMap<AppState> = {
  productCart: taskReducer,
  //add more reducers here
};

在app.module.ts 中略有变化

import { taskReducer } from './shared/ngrx/counter.reducer';
import { StoreModule } from '@ngrx/store';
import { reducers } from 'where-you-export-reducers'

@NgModule({
 declarations: [
   AppComponent
 ],
 imports: [
   BrowserModule,
   AppRoutingModule,
   BrowserAnimationsModule,
   MatIconModule,
   StoreModule.forRoot(reducers),

【讨论】：