ngrx 4选择器返回整个状态而不是子状态

Question

由于某些原因，我的所有选择器都返回整个状态对象而不是我认为应该的子状态。例如，我试图从reducers / customer.ts返回客户状态，而是从index.ts获得整个State的对象。

在从github检查ngrx示例应用程序之后，我选择了下面的特定结构，显然我做错了。

文件结构：

这是actions / customer.ts：

  string question;
  cout << "Type [1] to begin...";
  cin >> question;

  cout << "A computer programmer figures out the process of 
     designing, writing, testing, debugging, and maintaining the source c 
     ode for computer programs";   

  cout << "Type [1] to continue...";
  cin >> question;

  cout << "Part 2";   


  return 0;

and reducers / customer.ts：

import { Action } from '@ngrx/store';
import { State } from '../reducers/customer';

export enum CustomerActionTypes {
  Add = '[Customer] Add Selected Customer to Store'
}

export class Add implements Action {
  readonly type = CustomerActionTypes.Add;
  constructor(public payload: State) {
    console.log("from action: " + JSON.stringify(payload,null,2));
  }
}

export type CustomerActions = Add

and reducers / index.ts：

import { ActionReducer, Action } from '@ngrx/store';
import { CustomerActionTypes, CustomerActions } from '../actions/customer';

export interface State {
  name: string;
  status: string;
  phone: string;
  stage: string;
  type: string;
  id: string;
  street: string;
  city: string;
  postalCode: string;
  email: string;
  state: string;
}

export function reducer(
  state: State,
  action: CustomerActions
): State {
  switch (action.type) {
    case CustomerActionTypes.Add:
      return action.payload

    default:
      return state;
  }
}

export const getCustomerState = (state: State) => state;

并在app.module.ts中导入：

//For reducers map
import * as fromMainNav from './main-nav-ui';
import * as fromTradeUI from './trade-ui';
import * as fromAppts from './appointments';
import * as fromCustomer from './customer';


//Whole application state
export interface State {
  mainNavUI: fromMainNav.State;
  tradeUI: fromTradeUI.State;
  appointments: fromAppts.State;
  selectedCustomer: fromCustomer.State;
}

//Reducer map
export const reducers = {
  mainNavUI: fromMainNav.reducer,
  tradeUI: fromTradeUI.reducer,
  appointments: fromAppts.reducer,
  selectedCustomer: fromCustomer.reducer
};

最后我是如何在组件中连接它并使用选择器：

imports: [
    ...
    StoreModule.forRoot(reducers)
  ],

任何帮助将不胜感激，谢谢！

Answer 1

尝试使用reducers/index.ts内的createFeatureSelector从顶级功能状态开始：

export const getAppState = createFeatureSelector<State>('wholeApp');

然后在另一个选择器中使用它来访问您的客户减速器：

export const getCustomer = createSelector(
  getAppState,
  (state: State) => state.selectedCustomer
);

从那里你可以通过链接选择器继续深入到你的状态，例如，如果你的组件只需要知道客户的电子邮件地址，它可以只订阅：

export const getEmail = createSelector(
   getCustomer,
   (state: fromCustomer.State) => state.email
);

Answer 2

Salem为您提供了一个很好的解决方案，但问题的根本原因是应用程序组件中的这一行。

this.cust$ = ngrxStore.select(fromCustomer.getCustomerState);

您的fromCustomer.getCustomerState定义如下：

export const getCustomerState = (state: State) => state;

由于ngrxStore.select始终会返回您的根状态，因此您当然仍会根据定义此getCustomerState函数的方式来获取根状态。您的getCustomerState函数不会进行任何转换，它只会返回传递的任何内容通过。