使用Cloud Firestore和ReactJS的最佳实践

Question

更具体地说，我询问了国家管理以及向Firestore阅读和写作的最佳实践。在开始设置并为我正在使用的网站进行布局后，我开始想知道这一点。我目前对Firestore的了解是，从集合或文档中获取数据的最基本方法是使用GET（ ）方法是接收一次读取或使用OnSnapShot（）接收文档的实时数据流。由于这些不同的方法，这使我想到了设置组件和状态逻辑的最佳方法。

1. 您最初可以调用get（）方法并将其设置为等于组件状态。然后，您可以使用该状态将数据传递给组件和儿童。要编写/删除数据，您可以同时写入/删除状态和Firestore文档。这似乎具有有限阅读的好处，但更多的写作。它似乎还增加了组件状态和实际文档之间的DESANC的可能性。

2. 为了减少写入的数量，是否可以继续写入/删除该州，而不是同时使用Firestore文件？相反，一旦组件卸下后，您是否可以使用使用效应返回函数来编写/删除状态和文档之间的差异？此选项似乎有限的读取，有限的写作，并且具有单一的数据来源（状态）。但是，卸载文档写入的逻辑可能更复杂。

3. 似乎也可以使用onSnapShot（）方法删除并发写入/删除状态，并仅将它们放在文档上。似乎每次都可以直接从该文档中聆听文档的更改并更新状态。此选项似乎具有简单的状态逻辑的好处，并且国家与文件之间没有脱节。但是依次似乎会导致很多读写和写作。

我没有发现太多的信息直接讨论这些想法，我对处理与上述示例相关的数据流和州管理的当前最佳实践感到好奇。任何帮助将不胜感激！

Answer 1

创建上下文对于应用程序，

首先，我们将为Firestore Access和Firestore访问和上下文创建一个上下文使用其提供商包装应用程序 authProvider ，我们将创建一个hook useauth 访问必要的方法或访问firestore -db，

让我们从创建上下文开始

import { initializeApp } from "firebase/app";
import {
  getAuth,
  onAuthStateChanged,
  signInWithEmailAndPassword,
  signOut,
} from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import React from "react";

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

let AuthContext = React.createContext(null);

function AuthProvider({ children }) {
  let [initializing, setInitializing] = React.useState(true);
  let [user, setUser] = React.useState(null);

  let authChanged = React.useCallback((firebaseUser) => {
    if (firebaseUser) setUser(firebaseUser);
    setInitializing(false);

    console.log({ firebaseUser });
  }, []);

  React.useEffect(() => {
    const subscriber = onAuthStateChanged(auth, authChanged);
    return subscriber;
  }, [authChanged]);

  let signin = async (newUser, successCallback, errorCallback) => {
    setInitializing(true);
    try {
      let res = await signInWithEmailAndPassword(
        auth,
        newUser.email,
        newUser.password
      );
      if (res.user) return successCallback();

      return errorCallback("Wrong credentials");
    } catch (error) {
      return errorCallback("Something went Wrong.");
    }
  };

  let signout = async (callback) => {
    await signOut(auth);
    setUser(null);
    callback();
  };

  return (
    <AuthContext.Provider value={{ initializing, user, signin, signout, db }}>
      {children}
    </AuthContext.Provider>
  );
}

export default AuthProvider;
export { AuthContext };

，对于挂钩，我们将简单地做 -

import React from "react";
import { AuthContext } from "./authProvider";

function useAuth() {
  return React.useContext(AuthContext);
}

export default useAuth;

现在我们已经创建了已准备好下一步的挂钩

：在您的登录屏幕中使用 signin 以进行严格访问，签名

与

”以下面的组件（PS使用 React> React> React> React-Router-dom 路由），可以从 数据，

export function RequireAuth({ children }) {
  let auth = useAuth();   // we'll create this hook to manage firbase auth and database access
  let location = useLocation(); // hook from react-router-dom

  if (auth.initializing) return null;

  if (!auth.user)
    return <Navigate to="/login" state={{ from: location }} replace />;

  return children;
}

现在我们将从我们的组件（路由）上访问firestore（路由

export default function Documents() {
  const [docs, setDocs] = React.useState([]);
  const [docsLoading, setDocsLoading] = React.useState(true);

  let { user, db } = useAuth();

  React.useEffect(() => {
    async function getUserDocuments() {
      setDocsLoading(true);
      const q = query(collection(db, "docs"), where("author", "==", user.uid));
      const querySnapshot = await getDocs(q);
      const tmpDocs = [];
      querySnapshot.forEach((doc) => {
        tmpDocs.push({ id: doc.id, data: doc.data() });
      });
      setDocs(tmpDocs);
      setDocsLoading(false);
    }

    getUserDocuments();
  }, []);

  return !docsLoading ? (
        docs.map((doc) => (/* show in ui */))
   ) : (
      <div>some loader... until we are loading data</div>
   )
)

）很乐意在评论中解决您的疑问:)

Answer 2

我也正在用React Web应用中的Firestore管理服务器端状态的最佳方法 - 尤其是鉴于公告并发react 。

我最终写了自己的国家管理库。

您可能需要查看@gmcfall/react-firebase-state
。它使用听众来确保数据是新鲜的，并且面对许多渲染周期和多个安装/卸载周期，它具有弹性。

你写的

..似乎（onsnapshot）会引起很多读写和写入。

我的经验恰恰相反。我必须更少去服务器的旅行，以确保我的数据是新鲜的。该解决方案的关键是要从持有服务器端状态的本地高速缓存中拥有组件“租赁”数据。但是，当数据索赔数量为零时，实体不会立即被驱逐出缓存。这样，如果用户短暂地远离组件，然后返回，或者同时渲染启动，则数据仍然存在，并且保证它是最新的。