React-Redux与Firebase集成的最优实现方案是什么？

优化方案核心思路 #

你当前的实现存在两个可以优化的问题：一是Firebase工具层和Redux逻辑强耦合，还会产生循环依赖（myFirebase导入actions的action creator，actions又导入myFirebase的查询方法）；二是异步请求和loading状态触发的顺序写反了，请求已经发出去才通知视图加载中，没有实际意义。

优化的核心是把Firebase层做成纯数据服务层，完全不感知Redux的存在，所有和状态更新相关的逻辑都收敛到actions.js中，完全符合你想要的关注点分离要求，不需要修改单个文件以外的代码就能调整action逻辑。

1. 优化后 myFirebase.js

只做纯数据查询，不接收dispatch、不导入任何Redux相关的内容，查询成功返回数据，查询失败直接抛出异常即可：

// 纯数据层，仅负责Firebase相关操作，和上层状态管理完全解耦
export const fetchCardsFromFirebase = async () => {
    const cardsCollection = collection(db, "cards");
    const cardsSnapshot = await getDocs(cardsCollection);
    return cardsSnapshot.docs.map(doc => ({ ...doc.data(), id: doc.id }));
}

2. 优化后 actions.js

所有异步流控制、状态更新逻辑都在这里统一管理，不需要给Firebase层传递dispatch，也避免了循环依赖：

import { FETCH_CARDS, CARDS_FETCHED, CARDS_FETCH_FAILED } from "./types";
import { fetchCardsFromFirebase } from "../myFirebase";

export const fetchCards = () => async (dispatch) => {
    // 先触发加载中状态，通知视图显示加载提示
    dispatch({
        type: FETCH_CARDS,
        payload: {message: "fetching cards... please wait"}
    });

    try {
        // 调用Firebase层方法拿数据
        const cards = await fetchCardsFromFirebase();
        // 触发数据获取成功的action
        dispatch(cardsFetched(cards));
    } catch (err) {
        // 还可以补充失败状态的处理，不需要修改Firebase层代码
        dispatch({
            type: CARDS_FETCH_FAILED,
            payload: {error: err.message}
        })
    }
};

// 统一在这里维护所有action creator
const cardsFetched = (cards) => ({
   type: CARDS_FETCHED, // 原代码这里写错了，字段名是type不是action
   payload: cards
});

进阶优化建议 #

如果你的项目还可以调整依赖，推荐改用官方推荐的Redux Toolkit替代传统Redux写法，内置的createAsyncThunk可以自动生成pending/fulfilled/rejected三种状态的action，不需要手动定义类型常量，代码量可以减少近一半，同时完全保留你想要的关注点分离特性。

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