是否可以在 React 中将 firebase 查询与 Redux-toolkit 或 RTK Query 一起使用？答案

【问题标题】：Is it possible to use firebase query with Redux-toolkit or RTK Query in React?是否可以在 React 中将 firebase 查询与 Redux-toolkit 或 RTK Query 一起使用？
【发布时间】：2022-10-07 06:36:13
【问题描述】：

我想知道我们可以在 React 中使用带有 Redux-toolkit createAsyncThunk 或 RTK Query 的 firebase 查询吗？

morioh.com/p/d1995e04dd56 你可能会觉得这很有用，这是一个使用 Firestore 数据库和 RTK Query 的教程

标签： reactjs firebase redux-toolkit

【解决方案1】：

是的，不是用query 属性编写RTK 查询端点，而是用queryFn 编写它们，并使用fakeBaseQuery 而不是fetchBaseQuery。

import { createApi, fakeBaseQuery } from '@reduxjs/toolkit/query'

const api = createApi({
  baseQuery: fakeBaseQuery(),
  endpoints: (build) => ({
    getSomeDataFromFirebase: build.query({
      queryFn(arg) {
        try {
          const result = ... // call firebase here
          return { data: result.something }
        } catch (e) {
          return { error: e }
        }
      },
    }),
  }),
})

【讨论】：

感谢您提供此信息。
我正在考虑做同样的事情，但主要是出于一致性原因。让 rtk 查询管理您的 Firestore 数据获取的主要好处是什么？ @phry
@djangodev 这取决于：那里有一些专门的库，例如 redux-query - 这些库可能更适合，具体取决于您希望如何使用它们。如果您之前为此使用过普通的 Redux，则使用 RTK Query 将为您节省大量代码 - 但它是一种“通用”解决方案，并非针对 firestore 量身定制的。

【解决方案2】：

通常在 redux 查询中我们使用 fetchBaseQuery 但由于我们只是查询数据库，因为使用 firebase 我们没有任何 put、delete、update api。

import {collection,doc,getDoc,getDocs} from "firebase/firestore";

export const postsApi = createApi({
  reducerPath: "posts",
  baseQuery: fakeBaseQuery(),
  tagTypes: ["Post"],
  endpoints: (builder) => ({
    fetchPosts: builder.query({
      // since we are using fakeBaseQuery we use queryFn
      async queryFn() {
        try {
          // blogs is the collection name
          const blogRef = collection(db, "posts");
          const querySnaphot = await getDocs(blogRef);
          let posts = [];
          querySnaphot?.forEach((doc) => {
            posts.push({ id: doc.id, ...doc.data() });
          });
          return { data: posts };
        } catch (error) {
          return { error };
        }
      },
      providesTags: ["Post"],
    }),
    //***************SINGLE ITEM FETCHING*************** */
    fetchSinglePost: builder.query({
      async queryFn(id) {
        try {
          const docRef = doc(db, "posts", id);
          const snapshot = await getDoc(docRef);
          return { data: snapshot.data() };
        } catch (error) {
          return { error };
        }
      },
      providesTags: ["Post"],
    }),
  }),
});

export const { useFetchPostsQuery, useFetchSinglePostQuery } = postsApi;

【讨论】：