5 tópicos úteis para usar em React apps com Firebase e Firestore

Nesta artigo, vamos ver 5 usos do Firebase que foram muito úteis para mim em alguns projetos. Vamos lá!

Introdução

O primeiro passo é instalar os packages que nós precisamos:

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

Podemos usar o `npm install`para isso também. ;)

Configuração

Agora, vamos criar nosso arquivo de configuração. No meu caso eu nomeei como firebase-config.js.

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 };

Uma pequena observação no código sobre userProfile: 'users'. Essa configuração permite gravar os dados de perfil (como nome, telefone, etc..) em uma collection automaticamente.
Agora precisamos configurar o arquivo index.js, verifiquemos as mudanças abaixo:

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

Usando

Por último nós verificamos aqui como usar isso em alguns casos como:

1. Redirecionar o login

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. Usando Autenticação:

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

Explicando o código: Neste método estamos usando o login com o Google, repare no catch estamos lançando uma mensagem, caso não dê erro ele automaticamente atualizará o state firebase.auth. :)

3. Usando 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)}</>);}

Explicando o código: Neste caso nós estamos como que 'ouvindo' a collection tests ordenando ela por data decrescente. Sempre que houve uma inclusão, exclusão ou atualização nessa collection no firebase, nós obteremos aqui o que foi feito na variavel tests.

4. Usando 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);
});
}
}

Explicando o código: Neste exemplo estamos adicionando um comentário no firestore.

5. Usando as informações de perfil.

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

Veja como é simples usando os dados de perfil do usuário logado no código acima.

Isso é tudo. Eu espero ter ajudado. Obrigado.

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

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
Eder Taveira

Eder Taveira

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

More from Medium

Educating and Healing

Medium Post 7

Shucking our Shells

Constructors