如何在Redux操作中分离firestore侦听器_如何在Saga中重新分派操作，如redux工具包自动重新获取_如何在redux操作中返回承诺 - 腾讯云开发者社区

如何在Redux操作中分离firestore侦听器

在Redux操作中分离Firestore监听器的方法可以通过创建一个中间件来实现。中间件是Redux的扩展机制，可以在Redux的action被派发到reducer之前进行处理。

以下是实现该功能的步骤：

首先，安装Redux和Firebase以及与Firestore相关的库：

npm install redux firebase react-redux redux-thunk
npm install --save firebase redux-firestore

在Redux应用的根目录下创建一个名为firestore.js的文件，用于处理Firestore监听器的逻辑。

import firebase from 'firebase/app';
import 'firebase/firestore';

// 初始化Firestore
firebase.initializeApp({ /* 配置firebase */ });
const firestore = firebase.firestore();

// 分离Firestore监听器的中间件
export const detachFirestoreListener = () => {
  return (dispatch, getState) => {
    const state = getState();
    const listener = state.firestore.listener; // 获取之前设置的监听器

    if (listener) {
      listener(); // 停止监听
      dispatch({ type: 'DETACH_FIRESTORE_LISTENER' });
    }
  };
};

// 创建Firestore监听器的中间件
export const createFirestoreListener = () => {
  return (dispatch, getState) => {
    const state = getState();

    if (state.firestore.listener) {
      // 如果已经存在监听器，则先停止之前的监听器
      dispatch(detachFirestoreListener());
    }

    // 创建新的监听器
    const listener = firestore.collection('your_collection').onSnapshot((snapshot) => {
      // 处理监听到的数据并派发到Redux的action
      const data = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }));
      dispatch({ type: 'UPDATE_FIRESTORE_DATA', data });
    });

    dispatch({ type: 'SET_FIRESTORE_LISTENER', listener });
  };
};

在Redux的reducer中处理Firestore监听器的状态：

const initialState = {
  listener: null, // 存储监听器的引用
  data: [] // 存储从Firestore获取的数据
};

const firestoreReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_FIRESTORE_LISTENER':
      return { ...state, listener: action.listener };
    case 'DETACH_FIRESTORE_LISTENER':
      return { ...state, listener: null, data: [] };
    case 'UPDATE_FIRESTORE_DATA':
      return { ...state, data: action.data };
    default:
      return state;
  }
};

在Redux的store中引入redux-thunk中间件，并使用firestoreReducer作为combineReducers的参数：

import { createStore, applyMiddleware, combineReducers } from 'redux';
import { createFirestoreInstance, firestoreReducer } from 'redux-firestore';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

// 初始化Firebase
firebase.initializeApp({ /* 配置firebase */ });
const firestore = firebase.firestore();

// 创建Redux store
const rootReducer = combineReducers({
  firestore: firestoreReducer
});

const store = createStore(
  rootReducer,
  applyMiddleware(thunk.withExtraArgument({ firestore }))
);

在组件中使用Firestore监听器：

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { createFirestoreListener, detachFirestoreListener } from './firestore';

const YourComponent = ({ data, createListener, detachListener }) => {
  useEffect(() => {
    createListener(); // 在组件挂载时创建Firestore监听器
    return () => {
      detachListener(); // 在组件卸载时停止Firestore监听器
    };
  }, []);

  return (
    <div>
      {/* 在此处使用获取到的数据 */}
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

const mapStateToProps = (state) => ({
  data: state.firestore.data
});

const mapDispatchToProps = (dispatch) => ({
  createListener: () => dispatch(createFirestoreListener()),
  detachListener: () => dispatch(detachFirestoreListener())
});

export default connect(mapStateToProps, mapDispatchToProps)(YourComponent);

这样，当YourComponent组件被挂载时，会自动创建Firestore监听器，并将获取到的数据存储在Redux的state中。当组件被卸载时，会停止监听器的运行，以防止内存泄漏。

请注意，以上示例代码是基于React和Redux开发的，使用了react-redux库进行状态管理。对于其他前端框架和库，可以根据类似的思路进行相应的修改和实现。

总结：通过创建一个中间件，在Redux操作中分离Firestore监听器可以实现对Firestore数据的实时更新和管理，以提高应用的性能和响应能力。

相关链接：