Redux-firestore with React

Question

So I have been creating an application where a user needs to log into firebase using google authentication. I am using redux, react-redux, react-redux-firebase, redux-firestore, and redux-thunk. I am able to successfully log the user into firebase with the google authentication. I now want to use firestore in order to have a collection of all the users. I have looked at the documentation for redux-firestore and the method of getting/manipulating is a little different. I have tried using the documentation, but I cannot get the functions to work with redux-firestore.

Here is the action

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) => {

        })
};

And here is my setup in index.js for the src folder

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();

I know that I have not used createFirestoreInstance in this code, but I was playing around with it.

If anyone could tell me how to get this working, I would appreciate it. Thanks!

Quick update: I have figured out how to at least write to firestore using this code

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

This is not the best (or maybe the right solution), but it does work. It is not using redux-firestore, but is there a better way?

Answer 1

If you're using React, use react-redux-firebase. There's no need for these many complication and the code looks much neater and simpler. Authentication, firestore and all other firebase features works out of the box with just small amount of code. They also comes with React hooks like useFirebase() and useFirestore() instead of you needing to write them on your own.

react-redux-firebase is built on top of redux-firebase and provides all the things you would need in React.

If your app only uses firebase, I would even recommend you use just plain Redux without Redux Thunk or Redux Saga.