Usando la base de fuego con React y Redux

Hay varias formas correctas de conectar la Firebase con su aplicación React. En esta guía, usted explorará el método basado en el contexto de React. Firebase ofrece una gama de servicios en el despliegue de aplicaciones sin servidor, incluyendo la base de datos en tiempo real, el Cloud Firestore, Firebase Storage (para el almacenamiento de archivos), etc. Por ahora, sólo se utilizará la base de datos en tiempo real. Pero el método de conectividad que implemente también tendrá espacio para utilizar cualquiera de los servicios anteriores en una etapa posterior.

Nota:

Un hecho importante a tener en cuenta en relación con la base de datos en tiempo real de la Firebase es que, como su nombre indica, ésta empuja actualizaciones de datos a la aplicación en tiempo real. Esto significa que, a diferencia de las fuentes de datos convencionales, de las que se extrae la información cuando es necesario, la Firebase sincronizará continuamente las actualizaciones de los datos una vez que se empiece a escuchar una consulta de datos. Por ejemplo, cuando indique que quiere escuchar todos los elementos de Todo en la base de datos, se le actualizará continuamente en cualquier actualización de la colección de Todo en la base de datos. Esto se facilita usando WebSockets. (Si necesita una introducción a los WebSockets, esta guía le ofrece una mirada en profundidad, pero no es necesaria para continuar con la guía actual).

El Contexto de Reacción que implemente para la conectividad de la Base de Fuego tendrá las siguientes funciones:

1. Iniciará una conexión con la Base de Fuego en el inicio de la aplicación.
2. Se asegurará de que sólo exista una conexión por cada instancia de aplicación con la Base de Fuego.
3. Estará disponible para ser utilizado en cualquier componente una vez inyectado como Proveedor de la Aplicación.
4. Interconectará todas las operaciones de lectura y escritura con la base de datos en tiempo real.
5. Se integrará con Redux directamente.

Añada la base de fuego a su proyecto React utilizando npm install –save firebase o yarn add firebase.

Para mantener las cosas limpias, crea una nueva base de fuego dentro del directorio src y crea los siguientes archivos:

1234567891011121314/// firebaseConfig.js// Contiene los detalles de configuración de la base de fuego, esto NO debe ser comprometido a su repo// si el repo es público// Podría usar opcionalmente . env para almacenar estos datos. apiKey: "********", authDomain: "********", databaseURL: "********", projectId: "********", storageBucket: "********", messagingSenderId: "********", appId: "********"};

javascript

Todos los detalles anteriores están disponibles en la configuración que copió al configurar el proyecto de la Base de Fuego. Si no lo has guardado antes, puedes encontrarlo de nuevo yendo a Configuración del proyecto en el panel de control del proyecto.

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162// firebase.js// contiene el contexto de la Firebase y el proveedorimportReact,{ createContext, useEffect }from$0027react$0027import firebaseConfig from$0027. /firebaseConfig$0027;importar aplicación de$0027firebase/app$0027import$0027firebase/database$0027;import{ useDispatch }de$0027react-redux$0027;import{ todoActions }de$0027. ./state/todos$0027;// creamos un React Context, para que sea accesible// desde un componente laterconstFirebaseContext=createContext(null)export{FirebaseContext}exportdefault({ children })={{let firebase ={ app:null, database:null}const dispatch =useDispatch();// compruebe si la aplicación de la base de fuego ha sido inicializada previamente// si no, inicialice con la configuración que guardamos anteriormenteif(! app.apps.length){ app.initializeApp(firebaseConfig); firebase ={ app: app, base de datos: app.database(), api:{ getTodos }}// función para consultar a Todos desde la base de datos y// disparar una acción Redux para actualizar los elementos en tiempo realfunctiongetTodos(){ firebase.database.ref($0027todos$0027).on($0027value$0027,(snapshot)= >{const vals = snapshot. val();let _records =[];for(var key in vals){ _records.push({...vals[key], id: key });}// setTodos es una acción de Redux que actualizaría el todo store// al _records payloaddispatch(setTodos(_records));})}retorno(<FirebaseContext. Provider value={firebase};{children}</FirebaseContext.Provider;}

javascript

A continuación, agregue el Proveedor de la Base de Fuego a su aplicación. Asegúrate de que cuando lo hagas, venga después de el Proveedor Redux. Si lo añades antes, no tendrá acceso al gancho useDispatch. En este ejemplo, definirás el proveedor en index.js y adjuntarás todos los proveedores en la parte superior del componente App.

1234567891011121314151617181920// index.jsimportReactfrom$0027react$0027;importReactDOMfrom$0027react-dom$0027;import$0027./index.css$0027;importAppfrom$0027./App$0027;import store from$0027./state/store$0027;import{Provider}from$0027react-redux$0027importFirebaseProviderfrom$0027. /firebase/firebase$0027ReactDOM.render(<React.StrictMode;<Proveedor store={store};<FirebaseProvider$0027
Ahora su conexión con la Base de Fuego está completa. En el inicio de su aplicación, llame a la función getTodos una vez y Firebase creará una sincronización entre la base de datos en tiempo real y la tienda Redux. Cada nueva actualización de la colección Todo se reflejará en la tienda Redux. 


123456789101112131415161718/// App.jsimport{FirebaseContext}from$0027. /firebase/firebase$0027;exportdefaultfunctionApp(props){const{ app, api }=useContext(FirebaseContext);// puedes acceder a todos desde el Redux storeconst todos =useSelector(state=> state.todo.todos);useEffect(()= &gt api.getTodos();}},[])return(...)}
javascript