NgRx中已废弃的带props的selectors用法有什么替代方案？

方案1：工厂函数式 Selector（最通用首选方案） #

这是官方推荐的主流替代方案，本质是把参数作为工厂函数的入参，返回一个绑定了对应参数的selector实例，完美兼容原有的 memoization 缓存机制。

原废弃写法对比 #

// 已废弃的带props selector写法
const selectUserById = createSelector(
  selectUsersState,
  (state, props: { id: string }) => state.users[props.id]
);
// 组件调用示例：this.user$ = this.store.select(selectUserById, { id: '123' });

新实现方式 #

// 工厂函数Selector实现
const selectUserById = (userId: string) => createSelector(
  selectUsersState,
  (state) => state.users[userId]
);
// 组件调用示例：this.user$ = this.store.select(selectUserById('123'));

动态参数场景适配 #

如果参数是动态变化的Observable类型，搭配switchMap使用即可：

this.user$ = this.userId$.pipe(
  switchMap(userId => this.store.select(selectUserById(userId)))
);

方案2：参数存入全局State（全局通用参数场景首选） #

如果props属于全局通用的属性（比如当前选中的主体ID、全局筛选项等），可以直接把参数存入State对应节点，通过组合Selector实现，完全不需要外部传参。

// 先定义取参数的Selector
const selectSelectedUserId = createSelector(
  selectUiState,
  state => state.selectedUserId
);
// 组合两个Selector直接获取目标数据
const selectCurrentUser = createSelector(
  selectUsersState,
  selectSelectedUserId,
  (userState, userId) => userState.users[userId]
);
// 组件直接调用，无需传参：this.user$ = this.store.select(selectCurrentUser);

方案3：Pipe 内直接计算（临时轻量场景首选） #

如果是组件内一次性使用、计算逻辑简单的场景，不需要额外定义Selector，直接在select后通过map处理参数即可：

this.user$ = this.store.select(selectUsersState).pipe(
  map(userState => userState.users[this.userId])
);

选型建议 #

• 高频复用、需要缓存的业务场景优先选工厂函数式Selector
• 参数为全局通用属性的场景优先选State存参+组合Selector的方案
• 临时使用、逻辑简单的轻量场景直接用Pipe内计算即可

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