组件卸载时如何取消RxJS Observer订阅？

下面提供几种可行的解决办法，你可以根据自己的场景选择：

方案1：结合takeUntil与组件卸载动作 #

通过在组件卸载时触发一个特定Redux动作，让Epic监听这个动作来终止请求流（包括重试逻辑）。

1. 定义组件卸载动作

// 动作类型常量
export const COMPONENT_UNMOUNTED = 'COMPONENT_UNMOUNTED';

// 动作创建函数
export const componentUnmounted = () => ({ type: COMPONENT_UNMOUNTED });

2. 在组件中触发卸载动作

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { componentUnmounted } from './your-action-file';

const TargetComponent = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    // 组件卸载时分发动作
    return () => dispatch(componentUnmounted());
  }, [dispatch]);

  return <div>...</div>;
};

3. 修改Epic的管道逻辑

import { ofType } from 'redux-observable';
import { switchMap, retry, catchError, takeUntil } from 'rxjs/operators';

const fetchDataEpic = (action$) => action$.pipe(
  ofType('YOUR_TRIGGER_FETCH_ACTION'), // 替换成你的触发请求动作类型
  switchMap(() => fetchData().pipe(
    retry({ delay: 1000 }),
    catchError(() => triggerErrorActionType()),
    // 监听卸载动作，一旦触发就终止整个流
    takeUntil(action$.pipe(ofType(COMPONENT_UNMOUNTED)))
  ))
);

方案2：手动管理订阅（组件内直接订阅场景） #

如果你的Observable是直接在组件内创建订阅的，而非通过Redux的epicMiddleware，可以在组件卸载时直接取消订阅。

import { useEffect } from 'react';
import { from } from 'rxjs';
import { switchMap, retry, catchError } from 'rxjs/operators';

const TargetComponent = () => {
  useEffect(() => {
    // 创建订阅
    const requestSubscription = from(yourTriggerAction()).pipe(
      switchMap(() => fetchData()),
      retry({ delay: 1000 }),
      catchError(() => triggerErrorActionType())
    ).subscribe();

    // 组件卸载时取消订阅，终止所有重试
    return () => requestSubscription.unsubscribe();
  }, []);

  return <div>...</div>;
};

方案3：双重保险：限制重试次数+终止信号 #

如果不想无限重试，可给retry设置最大次数，同时保留takeUntil的终止逻辑，避免极端情况：

const fetchDataEpic = (action$) => action$.pipe(
  ofType('YOUR_TRIGGER_FETCH_ACTION'),
  switchMap(() => fetchData().pipe(
    retry({ count: 5, delay: 1000 }), // 最多重试5次
    catchError(() => triggerErrorActionType()),
    takeUntil(action$.pipe(ofType(COMPONENT_UNMOUNTED)))
  ))
);

注意事项 #

• takeUntil要放在流的下游，确保能终止整个重试流程；
• 若使用epicMiddleware，需保证卸载动作能被Epic正确捕获；
• 取消订阅后，Observable会立即停止所有未完成的请求及后续重试计划。

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