如何在redux-logic中仅取消指定subscriber的运行间隔（不存ID到状态）？

嘿，这个场景我之前做实时数据订阅时也碰到过！不用把intervalID塞进redux reducer状态的话，咱们可以利用redux-logic的闭包特性，在logic内部维护一个订阅者的映射关系，把每个订阅者的唯一标识和对应的定时器ID绑定，这样就能精准取消单个订阅的定时任务，不会影响其他订阅者。

核心思路 #

在redux-logic的模块里用闭包保存一个Map（或者普通对象），用来存储：

• 键：每个订阅者的唯一ID（自己生成）
• 值：对应的定时器ID和订阅回调函数

这样订阅时记录关联关系，取消时根据ID找到对应的定时器清除即可，完全不用碰redux的全局状态。

具体实现步骤 #

1. 初始化闭包存储和ID生成工具

首先在你的logic文件里，用闭包创建一个订阅者存储，同时写一个生成唯一订阅ID的小工具：

// 闭包维护订阅者映射，避免污染全局也不用存到redux状态
const subscribers = new Map();
// 生成唯一订阅ID，保证每个订阅者都有专属标识
let nextSubscriberId = 0;
const generateSubscriberId = () => `subscriber_${nextSubscriberId++}`;

2. 编写订阅逻辑（SUBSCRIBE_DATA）

当发起订阅action时，生成唯一ID，创建定时任务，把ID和定时器ID绑定存入Map：

import { createLogic } from 'redux-logic';

const subscribeDataLogic = createLogic({
  type: 'SUBSCRIBE_DATA',
  async process({ action, dispatch }, done) {
    const { callback } = action.payload;
    // 生成当前订阅者的唯一ID
    const subscriberId = generateSubscriberId();

    // 定义定时获取数据的函数
    const fetchAndNotify = async () => {
      try {
        // 模拟从服务器获取数据
        const response = await fetch('/your-api-endpoint');
        const data = await response.json();
        // 调用当前订阅者的回调，传入数据
        callback(data);
      } catch (error) {
        dispatch({ type: 'FETCH_DATA_FAILED', payload: error.message });
      }
    };

    // 立即执行一次获取，然后启动定时任务
    await fetchAndNotify();
    const intervalId = setInterval(fetchAndNotify, 5000); // 5秒轮询一次

    // 把订阅者信息存入闭包的Map中
    subscribers.set(subscriberId, { intervalId, callback });

    // 把订阅ID返回给调用方（比如组件），方便后续取消
    dispatch({ 
      type: 'SUBSCRIBE_DATA_SUCCESS', 
      payload: { subscriberId } 
    });
    done();
  }
});

3. 编写取消订阅逻辑（UNSUBSCRIBE_DATA）

当需要取消某个订阅时，传入对应的订阅ID，从Map中找到定时器ID清除，并移除该条目：

const unsubscribeDataLogic = createLogic({
  type: 'UNSUBSCRIBE_DATA',
  process({ action }, done) {
    const { subscriberId } = action.payload;
    const subscriberInfo = subscribers.get(subscriberId);

    if (subscriberInfo) {
      // 精准清除当前订阅者的定时器
      clearInterval(subscriberInfo.intervalId);
      // 从映射表中移除该订阅者，释放资源
      subscribers.delete(subscriberId);
    }

    done();
  }
});

4. 组件中使用示例

在React组件里，你可以这样订阅和取消：

import { useDispatch, useEffect, useState } from 'react-redux';

function DataSubscriberComponent() {
  const dispatch = useDispatch();
  const [subscriberId, setSubscriberId] = useState(null);

  // 订阅数据
  const handleSubscribe = () => {
    dispatch({
      type: 'SUBSCRIBE_DATA',
      payload: {
        callback: (data) => {
          // 处理拿到的数据
          console.log('收到数据:', data);
        }
      }
    });
  };

  // 取消订阅
  const handleUnsubscribe = () => {
    if (subscriberId) {
      dispatch({
        type: 'UNSUBSCRIBE_DATA',
        payload: { subscriberId }
      });
      setSubscriberId(null);
    }
  };

  // 监听订阅成功的action，保存订阅ID
  useEffect(() => {
    const unsubscribe = store.subscribe(() => {
      const state = store.getState();
      const newSubId = state.subscription?.subscriberId; // 假设你把订阅ID存在了redux状态（可选）
      if (newSubId) setSubscriberId(newSubId);
    });
    return unsubscribe;
  }, []);

  return (
    <div>
      <button onClick={handleSubscribe}>开始订阅</button>
      <button onClick={handleUnsubscribe}>取消订阅</button>
    </div>
  );
}

关键优势 #

• 完全不需要把intervalID存入redux状态，避免了不必要的状态更新
• 每个订阅者独立管理自己的定时器，取消时不会影响其他订阅
• 利用闭包存储，逻辑集中在redux-logic内部，代码更整洁

内容的提问来源于stack exchange，提问作者Филипп Ицков