如何将 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;

如果您想了解更多详细信息，我写了一篇博客文章。