Firestore: enablePersistence (), а затем с использованием приставки с автономной базой данных? - PullRequest
Новая
       31

Firestore: enablePersistence (), а затем с использованием приставки с автономной базой данных?

0 голосов
/ 09 мая 2018

Итак, по сути, я использую Create-React-App и хочу разрешить пользователям добавлять данные в Redx как в автономном, так и в онлайн-режиме. Я также хочу синхронизировать Redx с 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 должен работать одинаково независимо от *

Любые мысли и отзывы приветствуются!

1 Ответ

0 голосов
/ 02 июля 2018

Итак, я понял, как правильно загрузить 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
  });

По сути, я разделил свой редукс и Firestore, но в конечном итоге они связаны через идентификатор Firestore.

...