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

Question

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

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

文件结构:

这是 actions/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

和 reducer /customer.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;

和 reducer /index.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
};

并在 app.module.ts 中导入:

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

最后，我如何将其连接到组件中并使用选择器:

...
import * as fromCustomer from '../../../shared/state/reducers/customer';
...

public cust$: Observable<fromCustomer.State>;

constructor(
    ...
    public ngrxStore: Store<fromCustomer.State>
  ) {
      this.cust$ = ngrxStore.select(fromCustomer.getCustomerState);
    }

如有任何帮助，我们将不胜感激，谢谢!

Answer 1

尝试使用createFeatureSelector在 reducers/index.ts 中从顶级功能状态开始:

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

有关更多详细信息(和示例)，我建议您查看 Todd Motto 撰写的这篇精彩文章:

https://ultimatecourses.com/blog/ngrx-store-understanding-state-selectors