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

Question

出于某种原因，我的所有选择器都 return 整个状态对象而不是我认为它们应该的子状态。例如，我试图只 return 来自 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

和reducers/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;

和reducers/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

尝试在 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
);

有关更多详细信息（和示例），我建议查看 Todd Motto 的这篇精彩文章：

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

Answer 2

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

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

而您的 fromCustomer.getCustomerState 定义如下：

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

因为 ngrxStore.select 总是 returns 你是根状态，当然你仍然会根据你定义的方式得到根状态 getCustomerState function.Your getCustomerState 函数不会做任何转换，它只是 returns 传递的任何内容。

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

ngrx 4 selectors returning entire state instead of sub states

state

store

selector

ngrx

angular