如何取消Redux Action中Firebase实时监听器的订阅？Firebase与Redux结合最佳实践探讨

你遇到的问题很常见——在Redux thunk里创建了Firestore快照监听器，但不知道如何在组件卸载（屏幕关闭）时清理它。确实，把订阅实例存在Reducer里是反模式，因为Reducer必须是纯函数，且状态需要可序列化，而订阅函数是带副作用的不可序列化值。

这里有个简单且符合最佳实践的解决方案：

方案：让Thunk Action返回取消订阅函数 #

Firestore的onSnapshot方法本身就会返回一个取消订阅函数，我们只需要让你的Redux thunk action把这个函数返回出去，然后在组件中管理它的生命周期即可。

1. 修改你的Thunk Action #

更新configListener，让它返回Firestore返回的取消订阅函数：

export const configListener = (id) => (dispatch) => { 
  // 保存取消订阅函数
  const unsubscribe = firestore() 
    .collection('config') 
    .doc(id) 
    .onSnapshot(documentSnapshot => { 
      dispatch(configFetched(documentSnapshot.data())); 
    }); 

  // 返回取消函数，让调用者可以执行清理
  return unsubscribe;
}

2. 在组件中管理订阅与取消 #

以React函数组件为例，使用useEffect钩子来处理订阅的创建和清理：

import { useDispatch } from 'react-redux';
import { configListener } from './path-to-your-actions';

function ConfigScreen({ configId }) {
  const dispatch = useDispatch();

  useEffect(() => {
    // 调用action并获取取消订阅函数
    const unsubscribe = dispatch(configListener(configId));

    // 组件卸载（屏幕关闭）时执行取消订阅
    return () => {
      unsubscribe();
    };
  }, [dispatch, configId]); // 依赖项变化时重新订阅

  // ...你的组件渲染逻辑
}

如果你用的是类组件，可以这样处理：

import { connect } from 'react-redux';
import { configListener } from './path-to-your-actions';

class ConfigScreen extends React.Component {
  componentDidMount() {
    // 保存取消订阅函数到实例属性
    this.unsubscribe = this.props.dispatch(configListener(this.props.configId));
  }

  componentWillUnmount() {
    // 组件卸载时取消订阅
    this.unsubscribe();
  }

  // ...其他组件逻辑
}

export default connect()(ConfigScreen);

为什么这个方案合理？ #

• 关注点分离：Redux负责处理数据的分发，组件负责管理自己的订阅生命周期，符合React和Redux的设计原则。
• 避免内存泄漏：组件卸载时主动取消订阅，不会留下无用的监听器占用资源。
• 符合Redux Thunk的特性：Thunk action允许返回任意值，这里返回取消函数完全合法。

如果你的场景需要多个组件共享同一个监听器，可以考虑在Redux中间件层面管理订阅池，但对于单屏幕的订阅需求，上面的方案已经足够简洁高效。

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