如何过滤Redux Store的RxJS可观察对象？

嘿，我来帮你搞定这个针对commands数组的Redux Store监听过滤问题！结合你给出的commands结构，我会分几种常见的使用场景来给出具体的代码实现，都是日常开发中常用的套路～

首先，咱们得先把Redux Store转换成RxJS Observable——你应该已经知道用store.asObservable()来做这件事了对吧？接下来就用RxJS的操作符来做各种过滤和转换。

场景1：只监听特定key的Command变化 #

比如你只想关注arrows这个按钮的状态变化，可以这么写：

import { map, filter, distinctUntilChanged } from 'rxjs/operators';

// 把Redux Store转为Observable
const store$ = store.asObservable();

// 提取并监听key为'arrows'的command
const arrowsCommand$ = store$.pipe(
  // 先从state里取出commands数组
  map(state => state.commands),
  // 找到目标command
  map(commands => commands.find(cmd => cmd.key === 'arrows')),
  // 确保找到的command存在（避免初始状态可能的undefined）
  filter(Boolean),
  // 只当command的内容真的变化时才触发订阅（避免冗余更新）
  distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr))
);

// 订阅处理变化
arrowsCommand$.subscribe(arrowsCmd => {
  console.log('Arrows按钮状态更新:', arrowsCmd);
  // 在这里更新你的工具栏按钮UI，比如切换activeState或者启用状态
});

场景2：只监听Command的某个特定属性变化 #

比如你只关心focus按钮的isEnabled状态变化，不需要其他属性的更新通知，可以这么优化：

const focusEnabled$ = store$.pipe(
  // 直接提取focus按钮的isEnabled属性
  map(state => state.commands.find(cmd => cmd.key === 'focus')?.isEnabled),
  // 确保值是有效的布尔类型
  filter(isEnabled => typeof isEnabled === 'boolean'),
  // 只有当isEnabled的值变化时才触发
  distinctUntilChanged()
);

focusEnabled$.subscribe(isEnabled => {
  console.log('Focus按钮是否启用:', isEnabled);
  // 在这里切换按钮的禁用/启用状态
});

场景3：过滤出所有isEnabled为true的Commands #

如果需要实时获取所有处于启用状态的按钮，并且在这个列表变化时收到通知：

const activeCommands$ = store$.pipe(
  // 过滤出所有isEnabled为true的commands
  map(state => state.commands.filter(cmd => cmd.isEnabled)),
  // 只当活跃按钮的列表真的变化时才触发（比如新增/移除了启用的按钮）
  distinctUntilChanged((prev, curr) => {
    // 对比两个列表的key集合是否一致（排序后避免顺序影响）
    const prevKeys = prev.map(cmd => cmd.key).sort().join(',');
    const currKeys = curr.map(cmd => cmd.key).sort().join(',');
    return prevKeys === currKeys;
  })
);

activeCommands$.subscribe(activeCmds => {
  console.log('当前启用的按钮:', activeCmds);
  // 在这里更新工具栏的按钮展示，比如隐藏禁用的按钮
});

场景4：监听Command的activeState变化（比如切换按钮状态） #

针对有activeState属性的按钮（比如arrows、geometry），可以单独监听这个属性的变化：

const geometryActiveState$ = store$.pipe(
  map(state => state.commands.find(cmd => cmd.key === 'geometry')?.activeState),
  // 确保值是有效的数字
  filter(state => typeof state === 'number'),
  // 只有当activeState变化时触发
  distinctUntilChanged()
);

geometryActiveState$.subscribe(activeState => {
  console.log('Geometry按钮当前状态:', activeState);
  // 在这里切换按钮的选中/未选中状态，比如切换图标
});

小提示 #

一定要记得用distinctUntilChanged！因为Redux每次dispatch都会触发state更新，即使你关心的command属性没有变化，这个操作符可以帮你过滤掉重复的状态，避免不必要的UI更新，提升性能。如果是对比复杂对象，用JSON.stringify虽然简单但性能一般，你也可以自己写更精准的对比函数（比如只对比关心的属性）。

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