5 useful ways to use Firebase and Firestore in React app

Image for post
Image for post

In this article, we’ll check through 5 uses of Firebase that were very useful for me in some projects. Let’s do it.

Introduction

yarn add react-redux-firebaseyarn add redux-firestoreyarn add firebase

We can do that using ‘npm install’. ;)

Configuration

import { createStore, combineReducers, compose } from ‘redux’
import { reduxFirestore, firestoreReducer, createFirestoreInstance } from ‘redux-firestore’
import { firebaseReducer } from ‘react-redux-firebase’
import firebase from ‘firebase/app’
import ‘firebase/auth’
import ‘firebase/database’
import ‘firebase/firestore’
const firebaseConfig = {
apiKey: process.env.REACT_APP_FIREBASE_apiKey,
authDomain: process.env.REACT_APP_FIREBASE_authDomain,
databaseURL: process.env.REACT_APP_FIREBASE_databaseURL,
projectId: process.env.REACT_APP_FIREBASE_projectId,
storageBucket: process.env.REACT_APP_FIREBASE_storageBucket,
messagingSenderId: process.env.REACT_APP_FIREBASE_messagingSenderId,
appId: process.env.REACT_APP_FIREBASE_appId,
measurementId: process.env.REACT_APP_FIREBASE_measurementId,
}; // from Firebase Console
const rfConfig = {} // optional redux-firestore Config Options// Initialize firebase instance
firebase.initializeApp(firebaseConfig)
// Initialize Cloud Firestore through Firebase
firebase.firestore();
// Add reduxFirestore store enhancer to store creator
const createStoreWithFirebase = compose(
reduxFirestore(firebase, rfConfig), // firebase instance as first argument, rfConfig as optional second)(createStore)
// Add Firebase to reducers
const rootReducer = combineReducers({
firebase: firebaseReducer,
firestore: firestoreReducer
})// Create store with reducers and initial state
const initialState = {}
const store = createStoreWithFirebase(rootReducer, initialState)
const rrfConfig = {
enableLogging: false,
userProfile: ‘users’, // root that user profiles are written to
updateProfileOnLogin: false, // enable/disable updating of profile on login
useFirestoreForProfile: true, // Save profile to Firestore instead of Real Time Database
useFirestoreForStorageMeta: true // Metadata associated with storage file uploads goes to Firestore
}
const rrfProps = {
firebase,
config: rrfConfig,
dispatch: store.dispatch,
createFirestoreInstance
}
export { store, rrfProps };

I have a little observation in the code above about “userProfile: ‘users’”. This config allows you to record the profile data in a collection automatically. it’s useful. :)
Now, we need to configure our index.js file, check the changes below:

import React from ‘react’;
import { ReactReduxFirebaseProvider } from ‘react-redux-firebase’
import ReactDOM from ‘react-dom’;
import Root from ‘./Root’;
import * as serviceWorker from ‘./serviceWorker’;
import { Provider } from ‘react-redux’;
import { store, rrfProps } from ‘./firebase-config’;
ReactDOM.render(
<Provider store={store}>
<ReactReduxFirebaseProvider {…rrfProps}>
<Root />
</ReactReduxFirebaseProvider>
</Provider>
, document.getElementById(‘root’));
serviceWorker.unregister();

Using

import { isEmpty, isLoaded } from 'react-redux-firebase';
import { useSelector } from 'react-redux';
function Login(props) {
const auth = useSelector(state => state.firebase && state.firebase.auth)
useEffect(() => {
if (isLoaded(auth) && !isEmpty(auth))
history.push(routeNames.DASHBOARD)
}, [auth]);
}

2. Using Auth:

import { useFirebase } from 'react-redux-firebase';function Login(props) {const firebase = useFirebase();function loginWithGoogle() {
firebase.login({ provider: 'google', type: 'popup' }).catch(e => {
let msg = handleAuthError (e.code);
message.error(msg);
});}}

3. Using real-time

import { useSelector } from 'react-redux';
import { useFirestoreConnect, useFirestore, useFirebase } from 'react-redux-firebase';
function Tests(props) {useFirestoreConnect(() => [{ collection: 'tests', orderBy: [['createdAt', 'desc']] },])
let tests = useSelector(state => state.firestore.ordered.tests);
return (<>{JSON.stringify(tests)}</>);}

4. Using Firestore

import { useFirestore } from 'react-redux-firebase'function Test(props) {
const firestore = useFirestore();
function addComment(comment) {
const comments = [...props.test.comments];
comments.push(comment)
firestore.collection('tests').doc(props.test.id).set({ ...props.test, comments }).then(data => {message.success('Comentário enviado!');}).catch(e => {
handleAuthError(e.code);
}).finally(() => {
//setLoading(false);
});
}
}

5. Using Profile Information

import { useSelector } from 'react-redux';function MenuBar(props) {const profile = useSelector(state => state.firebase.profile);
return (<>{JSON.stringify(profile)}</>);
}

That’s all. I hope that I helped you. See you. Thanks.

Written by

Software Engineer, Full Stack Developer, Musician and Writer. edertaveira.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store