Redux-Firestore с React

Question

Итак, я создаю приложение, в котором пользователь должен войти в firebase, используя аутентификацию Google. Я использую редуксы, реактивные-редуктивные, реактивно-редуксовые, огненные базы, редукционные пожарные и редуксовые. Я могу успешно войти в систему с помощью аутентификации Google. Теперь я хочу использовать FireStore, чтобы собрать коллекцию всех пользователей. Я посмотрел на документацию для redux-firestore, и метод получения / манипуляции немного отличается. Я попытался использовать документацию, но не могу заставить функции работать с redux-firestore.

Вот действие

export const signIn = () => (
    dispatch, 
    getState, 
    {getFirebase, getFirestore}) => {
        const firebase = getFirebase();
        const firestore = getFirestore();
        firebase.auth().signInWithPopup(provider).then(function(result) {
            if(result.credential) {
                firestore.get({collection: 'users', doc: result.user.uid}).then(function(doc) {
                    if(!doc.exists){
                        console.log("new!")
                        firestore.add(
                            {collection: 'users', doc: result.user.uid}, 
                            {name: firebase.auth.currentUser.displayName});
                    } else{
                        console.log("old!")
                    }
                })
            }
        }).catch((err) => {

        })
};

А вот мои настройки в index. js для папки sr c

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {BrowserRouter} from 'react-router-dom';
import {createStore, applyMiddleware, compose} from 'redux';
import {Provider} from 'react-redux';
import allReducers from './reducers';
import thunk from 'redux-thunk';
import firebase from './Firebase';
import {firebaseConfig} from './Firebase'
import {createFirestoreInstance, getFirestore, reduxFirestore} from 'redux-firestore';
import {ReactReduxFirebaseProvider, getFirebase} from 'react-redux-firebase';

const store = createStore(
  allReducers,
  compose(
    applyMiddleware(thunk.withExtraArgument({getFirebase, getFirestore})),
    reduxFirestore(firebaseConfig)
  ));

const rrfConfig = {
  userProfile: 'users',
  useFirestoreForProfile: true
};

const rrfProps = {
  firebase,
  config: rrfConfig,
  dispatch: store.dispatch,

}

ReactDOM.render(
  <Provider store={store}>
    <ReactReduxFirebaseProvider {...rrfProps}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </ReactReduxFirebaseProvider>
  </Provider>,
  document.getElementById('root')
);

serviceWorker.unregister();

Я знаю, что я не использовал createFirestoreInstance в этом коде, но я играл с ним.

Если кто-нибудь может сказать мне, как получить это работает, я был бы признателен. Спасибо!

Быстрое обновление: я понял, как хотя бы написать в firestore, используя этот код

const userRef = firebase.firestore().collection('users').doc(result.user.uid);
                userRef.get().then(function(doc) {
                    if(!doc.exists){
                        userRef.set({name: result.user.displayName});
                    }
                })

Это не самое лучшее (или, возможно, правильное решение), но оно делает Работа. Он не использует redux-firestore, но есть ли лучший способ?

Answer 1

Если вы используете React, используйте act-redux-firebase . Нет необходимости в этом большом количестве сложностей, и код выглядит намного аккуратнее и проще. Аутентификация, FireStore и все другие функции Firebase работают из коробки с небольшим количеством кода. Они также поставляются с крючками React, такими как useFirebase() и useFirestore(), вместо того, чтобы писать их самостоятельно.

react-redux-firebase построен поверх redux-firebase и предоставляет все, что вам нужно в React.

Если ваше приложение использует только Firebase, я бы даже рекомендовал использовать только обычный Redux без Redux Thunk или Redux Saga.