Neste artigo, vamos ver 5 usos do Firebase que foram muito úteis para mim em alguns projetos, foi o que eu chamei de 5 tópicos para usar em React apps com Firebase e Firestore. Vamos lá!

React – Introdução

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

yarn add react-redux-fireba
seyarn add redux-firesto
reyarn add firebase

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

React – 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 Consoleconst 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();

LEIA TAMBÉM: Tutorial CRUD em app Android e iOS com React Native (Parte 4)

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.

LEIA TAMBÉM: Simplificando componentes com React Hooks

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. React – 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.