如何將 redux 集成到 firebase firestore 中？

Question

我能夠從 firebase firestore 獲取 categoryMap 中的數據，但我想將數據保存在 state 中，然后使用 redux 工具包在組件之間共享 state。 我應該在下面的代碼中創建動作創建者，還是應該使用 React 的 useState 鈎子，然后在其上應用 redux？

這是我從 firestore 獲得的數據的代碼片段：

export const getCategoriesAndDocuments = async () => {
  const collectionRef = collection(db, 'categories');
  const q = query(collectionRef);
  const querySnapshot = await getDocs(q);
  const categoryMap = querySnapshot.docs.reduce((acc, docSnapshot) => {
    const { title, items } = docSnapshot.data();

    acc[title.toLowerCase()] = items;
    return acc;
  }, {});
};

Answer 1

您可以直接將數據存儲在您的 redux 存儲中。 由於 redux store 是A store 保存應用程序的整個狀態樹，因此您不需要添加額外的狀態。

Answer 2

我知道這是一個老問題，但如果有人最終來到這里尋找答案：

除了 Tolunay Özdemir 的建議之外，您還可以使用RTK 查詢從 Firestore 獲取數據。 通過這種方式，您可以受益於它的緩存功能並使用...查詢，如果您想使用它們，請使用...Mutation 掛鈎。

您可以執行類似以下操作，使用fakeBaseQuery()作為baseQuery和queryFn而不是常規query ：

import { createApi, fakeBaseQuery } from '@reduxjs/toolkit/query/react';
import { collection, doc, getDocs } from 'firebase/firestore';
import { db } from '../../firebase';

export const getCategoriesAndDocuments = async () => {
  const collectionRef = collection(db, 'categories');
  const q = query(collectionRef);
  const querySnapshot = await getDocs(q);
  const categoryMap = querySnapshot.docs.reduce((acc, docSnapshot) => {
    const { title, items } = docSnapshot.data();
    acc[title.toLowerCase()] = items;
    return acc;
  }, {});
  return categoryMap;
};

export const api = createApi({
  baseQuery: fakeBaseQuery(),
  endpoints: (builder) => ({
    fetchData: builder.query({
      async queryFn() {
        try {
          const data = await getCategoriesAndDocuments();
          return { data };
        } catch (error) {
          console.error(error.message);
          return { error: error.message };
        }
      },
    }),
  }),
});

export const { useFetchDataQuery } = api;

如果您想了解更多詳細信息，我寫了一篇博客文章。