如何将 React-Redux 与 Firebase 集成？

Question

我使用 create-react-app 创建了一个 React 应用程序并配置了一个带有 reducer 的 redux store。我还添加了 firebase，我的项目运行良好。组件可以触发从 firestore 获取集合的操作，然后它在 return 中更新 redux 存储。

集成 firebase 和 redux store 的最佳方式是什么？我目前这样做的方式是有一个单独的操作从 firebase 触发 fetch/delete/onSnapshot，并传递对 dispatch 的引用，以便 firebase 函数可以花时间执行命令，然后它可以使用更新商店的操作调用 dispatch。

但我希望我的所有操作都在一个文件中，以便更好（关注点分离）。因此，firebase 可以调用调度，但动作创建者位于我的 actions.js 文件中。这样，我以后可以决定更改单个文件中的操作名称，如果我决定这样做的话。

这种方法的问题是，我将需要一个单独的操作来触发带有 firebase 的异步函数，并需要另一个操作创建器来实现承诺。

我正在做的事情有什么更好的方法？

store.js

const rootReducer = combineReducers({
    cards: cardsReducer,
});

const store = createStore( rootReducer , {}, applyMiddleware(thunk));
export default store;

myFirebase.js

// I need this to be called from an action in actions.js
// therefor, I am exporting it, and also, I am handing it dispatch
// so it will call store.dispatch once data is ready

export const fetchCardsFromFirebase = async (dispatch) => {
    const cardsCollection = collection(db, "cards");
    const cardsSnapshot = await getDocs(roomsCollection);
    const cards = roomsSnapshot.docs.map(doc => ({ ...doc.data(), id: doc.id }));
    // here I can either explicitly dispatch an action 
    /*
    dispatch({
       type: CARDS_FETCHED         //this constant string will have to be imported
       payload: cards
    });
    */

    // or I can let an action in actions.js do the above:
    dispatch(cardsFetched(rooms));   //this function is imported from actions.js
}

actions.js

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

export const fetchCards = () => async (dispatch) => {

    fetchCardsFromFirebase(dispatch);  // give firebase access to dispatch

    dispatch({
        type: FETCH_CARDS,
        payload: {message: "fetching cards... please wait"}
    });
};

const cardsFetched = (cards) => ({
   action: CARDS_FETCHED,
   payload: cards
});

Answer 1

通常，这是一种非常古老的 Redux 风格 - 现代 Redux 不使用 switch..case reducer 或 ACTION_TYPES，切换到 modern Redux 可能已经为您节省了 50% 的代码.

也就是说，官方的 Redux Toolkit (RTK) 还附带了 RTK-Query，它是一种数据缓存抽象，应该也可以很好地与 firebase 一起使用，并且会自动为您生成 reducer、actions 甚至 hooks。（提示：对于 firebase，您需要使用 queryFn）。这也会为您节省更多代码。

我建议您遵循 the official Redux Tutorial，它首先展示了现代 Redux，然后在后面的章节中介绍了 RTK 查询。

如何将 React-Redux 与 Firebase 集成？

How can I integrate React-Redux with Firebase?

firebase

reactjs

redux

store.js

myFirebase.js

actions.js