NGRx 4选择器返回整个State而非子State问题求助

我来帮你定位这个问题，核心原因有两个：组件中注入的Store泛型类型错误，以及选择器定义时没有正确关联到整个应用状态的子节点，下面一步步给你修正：

1. 修正组件中Store的泛型类型 #

你现在在组件里注入的是Store<fromCustomer.State>，但实际你的应用全局状态是reducers/index.ts里定义的包含多个子状态的State。当泛型类型写错时，Store会错误地认为整个状态就是单个customer的State，这直接导致选择器拿到的是全局状态而非子状态。

修改组件中的代码：

// 先导入全局应用状态类型
import * as fromRoot from '../../../shared/state/reducers/index';
import * as fromCustomer from '../../../shared/state/reducers/customer';

// ...

public cust$: Observable<fromCustomer.State>;
constructor(
  ...
  public ngrxStore: Store<fromRoot.State> // 这里替换为全局应用State
) {
  this.cust$ = ngrxStore.select(fromCustomer.getCustomerState);
}

2. 修正选择器的类型定义 #

你当前的getCustomerState选择器接收的是fromCustomer.State类型参数，但实际调用时传入的是全局应用State。需要调整选择器，让它接收全局状态并返回指定的子状态节点：

修改reducers/customer.ts中的选择器：

// 导入全局应用State类型
import { State as AppState } from './index';
import { State } from './customer';

// ...

// 调整选择器，接收全局State，返回selectedCustomer子状态
export const getCustomerState = (state: AppState) => state.selectedCustomer;

额外优化建议（可选） #

为了避免后续出现类似类型错误，推荐使用NGRX官方推荐的createFeatureSelector和createSelector来组织选择器，代码会更健壮：

在reducers/customer.ts中：

import { createFeatureSelector, createSelector } from '@ngrx/store';
import { State as AppState } from './index';
import { State } from './customer';

// 先创建一个feature选择器，定位到selectedCustomer节点
export const selectCustomerState = createFeatureSelector<AppState, State>('selectedCustomer');

// 可以继续创建更细粒度的选择器，比如获取customer的名称
export const selectCustomerName = createSelector(
  selectCustomerState,
  (state: State) => state.name
);

然后在组件中使用：

// 获取整个customer子状态
this.cust$ = ngrxStore.select(fromCustomer.selectCustomerState);
// 获取customer的名称
this.custName$ = ngrxStore.select(fromCustomer.selectCustomerName);

这样修改后，你的选择器就能正确返回预期的子状态了。

内容的提问来源于stack exchange，提问作者hankphone