如何在Observable流中比较Redux的RxJs动作数据并调整输出？

针对你遇到的场景——2秒内触发3次OPEN动作，其中第1、3次数据相同，需要保留第2、3次动作并按2→3顺序输出——我们可以通过RxJS的操作符组合来实现这个逻辑，核心思路是对相同数据的动作只保留最后一次，不同数据的动作全部保留，同时兼顾动作本身的延迟处理。

方案1：实时处理（推荐） #

这种方式会在新的相同数据动作触发时，立即取消前一个同数据动作的延迟执行，不需要等待2秒窗口结束，更符合实时场景需求：

import { ofType } from '@redux-observable';
import { groupBy, switchMap, mergeMap, delay, of } from 'rxjs';

const openEpic = (action$) => action$.pipe(
  // 筛选出类型为'OPEN'的动作
  ofType('OPEN'),
  // 按动作携带的数据分组，确保相同数据的动作进入同一流
  // 注意：如果payload是对象，用JSON.stringify生成唯一标识；简单类型直接用payload即可
  groupBy(action => JSON.stringify(action.payload)),
  // 合并所有分组的处理结果
  mergeMap(group$ => group$.pipe(
    // 每个分组内，新动作会取消前一个动作的延迟Observable，只保留最后一个
    switchMap(action => 
      of(action).pipe(
        delay(action.delayTime) // 这里替换为你实际的延迟时间，比如固定值或动作自带的延迟字段
      )
    )
  ))
);

逻辑说明：

1. groupBy将相同数据的OPEN动作归为一组，确保我们可以单独处理同数据的动作流；
2. 每个分组内使用switchMap：当新的同数据动作进来时，会自动取消前一个正在延迟等待的动作Observable，只有最后一个同数据动作会完成延迟并输出；
3. 不同数据的动作在独立分组中，它们的延迟执行不会被取消，最终会按触发顺序输出；
4. 最终输出顺序自然是动作2→动作3，完全符合你的需求。

方案2：固定窗口批量处理 #

如果你的业务逻辑要求必须等2秒窗口结束后，再一次性筛选并输出动作，可以用bufferTime结合数组过滤实现：

import { ofType } from '@redux-observable';
import { bufferTime, mergeMap, delay, of } from 'rxjs';

const openEpic = (action$) => action$.pipe(
  ofType('OPEN'),
  // 收集2秒内触发的所有OPEN动作
  bufferTime(2000),
  mergeMap(actions => {
    const seenPayloads = new Set();
    // 倒序遍历动作数组，保留每个数据的最后一次出现
    const filteredActions = actions.reverse().filter(action => {
      const payloadKey = JSON.stringify(action.payload);
      if (!seenPayloads.has(payloadKey)) {
        seenPayloads.add(payloadKey);
        return true;
      }
      return false;
    }).reverse(); // 反转回原触发顺序

    // 对筛选后的动作应用延迟，合并输出
    return merge(...filteredActions.map(action => 
      of(action).pipe(delay(action.delayTime))
    ));
  })
);

逻辑说明：

1. bufferTime(2000)会收集2秒内所有触发的OPEN动作，一次性输出为数组；
2. 通过倒序遍历+Set去重，确保每个数据只保留最后一次出现的动作（也就是原数组中最靠后的那个）；
3. 反转数组恢复原触发顺序，最后对每个动作应用延迟后输出，得到动作2→动作3的结果。

关于数据比较的注意事项 #

• 如果动作的payload是字符串、数字等简单类型，直接用action.payload作为分组/去重的key即可；
• 如果是复杂对象，需要用JSON.stringify(action.payload)生成唯一标识，或者使用深度比较函数（比如lodash.isEqual）来判断数据是否一致，确保相同数据的动作能被正确分组/过滤。

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