基于NgRx实现应用A与B状态共享：选择器适配问题咨询

你遇到的这个场景其实是NgRx项目中复用状态逻辑时的典型痛点——Selector和根状态强绑定导致无法直接跨应用复用。我在几个大型项目里都处理过类似需求，给你分享几个实际可行的解决方案：

方案1：将Selector改造为工厂函数（最灵活的通用方案） #

核心思路是把原本绑定特定根状态的Selector，改成可接收特征状态选择器的工厂函数，彻底解耦根状态依赖。

改造前（A应用中的Selector） #

// A/app/shared/something.selectors.ts
import { createSelector } from '@ngrx/store';
import { RootStateA } from '../root-state-a';

// 直接绑定RootStateA，无法在B中复用
export const selectSomething = createSelector<RootStateA, Something>(
  (state) => state.something,
  (something) => something
);

export const selectActiveSomething = createSelector<RootStateA, Something[]>(
  selectSomething,
  (something) => something.filter(item => item.isActive)
);

改造后（抽成可复用的工厂函数） #

// A/app/shared/something.selectors.ts
import { createSelector, MemoizedSelector } from '@ngrx/store';
import { SomethingState } from './something.state';

// 定义工厂函数，接收特征状态的选择器作为参数
export const createSomethingSelectors = <AppRootState>(
  selectFeatureState: MemoizedSelector<AppRootState, SomethingState>
) => {
  // 所有子Selector都基于传入的特征选择器构建
  const selectSomething = createSelector(
    selectFeatureState,
    (state) => state.something
  );

  const selectActiveSomething = createSelector(
    selectSomething,
    (something) => something.filter(item => item.isActive)
  );

  return {
    selectSomething,
    selectActiveSomething
  };
};

在A/B应用中分别使用 #

// A/app/root-selectors.ts
import { RootStateA } from './root-state-a';
import { createFeatureSelector } from '@ngrx/store';
import { createSomethingSelectors } from './shared/something.selectors';

// A中特征状态的key是"something"
const selectSomethingFeature = createFeatureSelector<SomethingState>('something');
export const { selectSomething, selectActiveSomething } = createSomethingSelectors<RootStateA>(selectSomethingFeature);

// B/app/root-selectors.ts
import { RootStateB } from './root-state-b';
import { createFeatureSelector } from '@ngrx/store';
import { createSomethingSelectors } from '../A/app/shared/something.selectors';

// B中把A的reducer挂载在"sharedSomething"下
const selectSomethingFeatureInB = createFeatureSelector<SomethingState>('sharedSomething');
export const { selectSomething, selectActiveSomething } = createSomethingSelectors<RootStateB>(selectSomethingFeatureInB);

这种方式完全摆脱了根状态的限制，不管A/B的状态结构差异多大，只要传入对应特征状态的选择器，就能复用所有Selector逻辑。

方案2：利用Selector的projector属性（最小改动方案） #

如果不想大面积重构原有Selector，可以利用NgRx Selector自带的projector属性——它就是Selector的纯函数逻辑部分，我们只需要替换上层的特征状态选择器即可。

保留A中原有的Selector #

// A/app/shared/something.selectors.ts
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { SomethingState } from './something.state';

// A中的特征选择器
export const selectSomethingFeature = createFeatureSelector<SomethingState>('something');

export const selectSomething = createSelector(
  selectSomethingFeature,
  (state) => state.something
);

export const selectActiveSomething = createSelector(
  selectSomething,
  (something) => something.filter(item => item.isActive)
);

在B中复用Selector逻辑 #

// B/app/shared/shared-something.selectors.ts
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { SomethingState } from '../A/app/shared/something.state';
import { selectSomething, selectActiveSomething } from '../A/app/shared/something.selectors';

// B中对应的特征选择器
const selectSomethingFeatureInB = createFeatureSelector<SomethingState>('sharedSomething');

// 复用A的projector逻辑，替换特征选择器
export const selectSomethingInB = createSelector(
  selectSomethingFeatureInB,
  selectSomething.projector
);

export const selectActiveSomethingInB = createSelector(
  selectSomethingFeatureInB,
  selectActiveSomething.projector
);

这个方案的改动最小，适合原有Selector逻辑已经很完善，不想重新编写的场景。

方案3：定义共享状态接口（适合状态结构相似的场景） #

如果A和B的根状态结构有共性，可以通过TypeScript的接口来约束，让Selector适配多种根状态。

定义共享接口 #

// shared/types.ts
import { SomethingState } from '../A/app/shared/something.state';

export interface HasSomethingState {
  // 约定根状态必须包含这个key的特征状态
  something: SomethingState;
}

改造A的Selector #

// A/app/shared/something.selectors.ts
import { createSelector } from '@ngrx/store';
import { HasSomethingState } from '../../../shared/types';

// 用共享接口代替具体的RootStateA
export const selectSomething = createSelector<HasSomethingState, Something>(
  (state) => state.something,
  (something) => something
);

在B中让根状态实现共享接口 #

// B/app/root-state-b.ts
import { HasSomethingState } from '../../shared/types';
import { BSpecificState } from './b-specific.state';

// RootStateB实现HasSomethingState接口
export interface RootStateB extends HasSomethingState {
  bSpecific: BSpecificState;
}

此时A中的Selector就可以直接在B中使用了，因为RootStateB符合HasSomethingState的结构。不过这个方案的局限性是，B中必须用和A一样的特征状态key（比如something），否则无法适配。

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