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>
);
}
Discussion (1)
Buenísimo, me encanta Firebase! No conocía la librería reactfire, le echaré una mirada