Firestore：enablePersistence() 然后将 redux 与离线数据库一起使用？答案

【问题标题】：Firestore: enablePersistence() and then using redux with offline database?Firestore：enablePersistence() 然后将 redux 与离线数据库一起使用？
【发布时间】：2018-05-09 02:39:02
【问题描述】：

所以，本质上，我使用的是 Create-React-App，我希望允许用户离线或在线向 redux 添加数据。我还想将 redux 与 Firestore 同步。

在我的主要尝试中，我初始化了我的 firebase 设置：

// ./firebase/firebase.js

var firestoreDatabase;

firebase.initializeApp(config.firebase.config);
firebase.firestore().enablePersistence().then(() => {
  firestoreDatabase = firebase.firestore();
});

export { firebase, firestoreDatabase };

然后，确保它已正确触发（这绝对是错误的，但我无法找出捕捉 enablePersistence() 返回的最佳位置...）：

// src/index.js

import { firebase, firestoreDatabase } from "./firebase/firebase";

firebase.auth().onAuthStateChanged(user => {
  store.dispatch(setReduxData()).then(() => {
  if (firestoreDatabase) {
    ReactDOM.render(application, document.getElementById("root"));
  }
  });
});

动作文件

import { firestoreDatabase } from "../firebase/firebase";

export const setReduxData = () => {
  return (dispatch, getState) => {
    const uid = getState().auth.uid;
    const data = { newData: '123' };

    return firestoreDatabase
      .collection("Users")
      .doc(uid)
      .collection("data")
      .add(data)
      .then(ref => { 
        // so, this never gets fired
        dispatch(
          addData({
            id: ref.id,
            ...data
          })
        );
      })

所以dispatch 永远不会被触发，但是，当我刷新应用程序时，我输入的数据{ newData: '123' } 会添加到存储中。

我认为我的整个处理方式都是错误的。我不喜欢将firestoreDatabase 导出为未定义，然后在enablePersistence() 返回时更新它...

我只想enablePersistence() 一次，然后根据用户是否在线使用缓存或服务器...无论如何，Redux 都应该以相同的方式运行...

欢迎任何想法和反馈！

【问题讨论】：

标签： reactjs firebase redux google-cloud-firestore create-react-app

【解决方案1】：

所以，我想出了如何在我的应用程序中正确加载 Firestore：

在我的 firebase.js 文件中：

import * as firebase from "firebase";
import config from "../config";

// https://firebase.google.com/docs/reference/js/
firebase.initializeApp(config.firebase.config);

const database = firebase.database();
const auth = firebase.auth();
const googleAuthProvider = new firebase.auth.GoogleAuthProvider();

export { firebase, googleAuthProvider, auth, database };

然后，我添加了一个 firestore.js 文件：

import { firebase } from "./firebase";
import "firebase/firestore";
import { notification } from "antd";

firebase.firestore().settings({ timestampsInSnapshots: true });

const handleError = error => {
  if (error === "failed-precondition") {
    notification.open({
      message: "Error",
      description:
        "Multiple tabs open, offline data only works in one tab at a a time."
    });
  } else if (error === "unimplemented") {
    notification.open({
      message: "Error",
      description: "Cannot save offline on this browser."
    });
  }
};

export default firebase
  .firestore()
  .enablePersistence()
  .then(() => firebase.firestore())
  .catch(err => {
    handleError(err.code);
    return firebase.firestore();
  });

然后我在我的操作文件中调用 firestore：

import firestore from "../firebase/firestore";

return firestore
  .then(db => {
    var newData = db
      .collection("Users")
      .doc(uid)
      .collection("userData")
      .doc();
    newData.set(data);
    var id = newData.id;
    dispatch(addData({ id, ...data }));
  })
  .catch(err => {
    // notification
  });

基本上，我将我的 redux 和 Firestore 分开了，但最终它们是通过 Firestore id 连接起来的。

【讨论】：