在createAsyncThunk中处理onSnapshot订阅

import { createAsyncThunk } from '@reduxjs/toolkit';
import { firestore } from 'firebase';

export const fetchFirestoreData = createAsyncThunk(
  'data/fetchFirestoreData',
  async (_, { dispatch }) => {
    const collectionRef = firestore().collection('yourCollection');
    const unsubscribe = collectionRef.onSnapshot((snapshot) => {
      // 处理数据变化
      snapshot.docChanges().forEach((change) => {
        if (change.type === 'added') {
          dispatch(addData(change.doc.data()));
        }
        if (change.type === 'modified') {
          dispatch(updateData(change.doc.data()));
        }
        if (change.type === 'removed') {
          dispatch(removeData(change.doc.data()));
        }
      });
    });

    // 返回一个函数，用于取消订阅
    return () => unsubscribe();
  }
);

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { fetchFirestoreData } from './yourSlice';

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

  useEffect(() => {
    dispatch(fetchFirestoreData());
  }, [dispatch]);

  // 组件的其他代码

  return (
    // 组件的 JSX
  );
};

useEffect(() => {
  const unsubscribe = dispatch(fetchFirestoreData());
  return () => unsubscribe();
}, [dispatch]);