Firestore:enablePersistence()，然后在离线数据库中使用 redux?

Question

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

在我的主要尝试中，我初始化了我的火力基础设置：

// ./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 都应该运行相同的操作......

欢迎任何想法和反馈！

Answer 1

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

在我的火力基地.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 };

然后，我添加了一个火库.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连接。