Como usar Firestore y React JS

#react #firebase #hooks #firestore

Nelson Adonis Hernandez Sep 30, 2020 ・Updated on Oct 3, 2020 ・1 min read

Para este ejemplo usaremos reactfire que es un libreria que nos facilita utilizar firebase en React JS

Lo primero sera importar el hook useFirestore

Ejemplo:

import React, { Fragment, useEffect } from "react";
import { useFirestore } from "reactfire";

export default function Categorias() {
  const refFire = useFirestore();

  return (
    <Fragment>
    <h1>Aprendiendo useFirestore<h1>
    </Fragment>
  );
}

Ahora lo mas tipico es que nosotros vamos hacer consultas para esto usaremos el hook useEffect.

Ahora porque de ultimo retornamos la constante subscriber? Es para que nuestra hook no sea infinito useEffect

//Obteniendo las categorias
  useEffect(() => {
   const subscriber =  refFire
      .collection("categorias")
      .onSnapshot((snapshot) => {
        const categoriasTotales = snapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));
        console.log(categoriasTotales);
        setCategorias(categoriasTotales)
      });
      // Clean up the subscriber 
      // esto significa que se crea una nueva peticion en cada actualización. 
      return ()=> subscriber()
  }, [refFire]);

Nuestro ejemplo quedaría de la siguiente manera

import React, { Fragment, useEffect, useState } from "react";
import { useFirestore } from "reactfire";

export default function Categorias() {
  const refFire = useFirestore();
  const [Categorias, setCategorias] = useState([]);

  //Obteniendo las categorias
  useEffect(() => {
   const subscriber =  refFire
      .collection("categorias")
      .onSnapshot((snapshot) => {
        const categoriasTotales = snapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));
        console.log(categoriasTotales);
        setCategorias(categoriasTotales)
      });
      // Clean up the subscriber 
      // esto significa que se crea una nueva peticion en cada actualización. 
      return ()=> subscriber()
  }, [refFire]);

  return (
    <Fragment>
         <h1>Aprendiendo useFirestore<h1>
    </Fragment>
  );
}