Ngrx select return 未定义

Question

我有这个项目，我正在实施 ngrx 来处理状态，我是这个项目的新手，到目前为止我已经成功地创建了状态和减速器，但是当我尝试做 select 它 returns 未定义。这是我的代码：

这是动作文件

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;
  }
}

我的 AppState

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}),

Answer 1

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

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),

Ngrx select return 未定义

Ngrx select return undefined

angular

ngrx

ngrx-store