Cómo integrar React Redux y Firebase en 3 simples pasos

En este artículo aprenderás cómo:

  • Cree una interfaz de usuario simple para la aplicación usando React
  • Adjunte la tienda Redux a la aplicación React
  • Conecte la base de datos en tiempo real de Firebase con la tienda Redux
  • Combine estas 3 cosas para crear una aplicación de tareas totalmente funcional

Antes de sumergirnos en estos 3 pilares. Así es como se verá el flujo de la aplicación. Nuestro componente desencadenará una acción. Esta acción hará alguna solicitud en la base de datos en tiempo real de Firebase. Luego, los datos de Firebase irán a nuestro reductor. De reductor a tienda. Y desde el componente de la tienda puede acceder a los datos. Nada lujoso, pero hace el trabajo.

Flujo de aplicaciones que integra Firebase

Crear una interfaz de usuario simple

Usaremos el paquete create-react-app para generar nuestra plantilla. Si aún no lo tiene, simplemente ejecute npm install -g create-react-app. Después de eso, vaya al directorio donde desea que se ubique su proyecto y ejecute create-react-app react-redux-firebase o cualquier nombre que considere adecuado. Dentro del directorio src, elimine los archivos innecesarios. Deje solo index.js App.js y registerServiceWorker.js allí. No toques registerServiceWorker.js. Otros archivos se verán de la siguiente manera.

Bueno. Estamos en un buen punto de partida. Ahora es el momento ideal para crear la tienda Redux para nuestra aplicación y conectarla.

Adjuntar tienda Redux a la aplicación React

La tienda es donde estarán todos los datos de nuestra aplicación. Cuando un componente necesita algunos datos. Simplemente lo conectamos a la tienda y luego podemos acceder a los datos en el componente mismo. Para hacerlo, primero necesitamos instalar un par de paquetes. Ejecución de dirección del proyecto interior

npm install --save redux react-redux redux-thunk

De acuerdo ... Tenemos todas las dependencias para crear una tienda lista. Ahora creemos el módulo de reductores. Dentro del directorio src crea una nueva carpeta llamada reductores. Dentro del directorio reductores crea el archivo dataReducer.js. Ahora reductor es solo una función simple con 2 argumentos. Estado inicial y acción. Todas las acciones activadas desde el componente pasan por todos los reductores. Ahora, cada reductor verifica el tipo de acción y, si el reductor lo sabe, actualiza los datos almacenados.

Así se verá nuestro reductor. Comprueba si el tipo de acción es FETCH_TODOS y, si lo es, actualiza la lista de nuestras tareas pendientes. Ahora dentro del directorio reductores, cree el archivo index.js. Este será el punto de entrada para nuestros reductores. Podemos combinar aquí múltiples reductores. En nuestro caso, solo tenemos uno, pero si la aplicación crece en el futuro, seguramente necesitaremos varios reductores.

Si añadiéramos un nuevo reductor, simplemente creamos un nuevo archivo dentro del directorio de reductores. Luego impórtalo. Y finalmente agréguelo a la función combineReducers. Esta función toma todos los reductores y los combina en uno. Y también le dice qué reductor es responsable de qué datos en la tienda.

Ahora, cuando tenemos listo el módulo de reductores, podemos crear una tienda y adjuntarlo a nuestra aplicación. Dentro del directorio raíz del proyecto, abra index.js. En este archivo estamos diciendo que queremos representar el componente de la aplicación. Para adjuntar la aplicación a la tienda, necesitamos envolverla en el componente Proveedor. El proveedor toma el accesorio de la tienda que representa la tienda de aplicaciones. Para crear una tienda, utilizamos el método auxiliar del paquete redux. Este método toma nuestros reductores, middlewares si queremos usar algunos y crea una tienda. El index.js se verá exactamente así. Y eso es. Ahora tenemos tienda conectada a nuestra aplicación.

Conexión de la base de datos en tiempo real de Firebase con la tienda Redux

Este paso puede parecer la parte difícil, pero en realidad es muy fácil. Primero instalemos las dependencias y desglosamos cómo funciona la base de datos Firebase.

npm install --save firebase

Ahora necesitamos inicializar Firebase en nuestra aplicación. Cree una nueva configuración de directorio y dentro cree un nuevo archivo firebase.js. Aquí importamos firebase SDK, inicializamos la aplicación, creamos referencias de bases de datos y las exportamos. Utilizaremos la referencia de la base de datos para todos para crear nuevas tareas o completarlas más adelante en el módulo de acciones. Puede preguntar qué es el objeto FirebaseConfig. Lo crearemos más adelante cuando le muestre cómo crear su propia aplicación Firebase.

Antes de pasar al módulo de acciones, hablemos sobre cómo funciona la base de datos en tiempo real de Firebase. En nuestro caso almacenaremos una lista de tareas en la base de datos. Los llamamos "todos". Adjuntaremos el oyente en esta lista de tareas y cada vez que cambie la lista, nuestra aplicación sabrá que hubo un cambio en los datos. Buscará los nuevos datos de la base de datos de Firebase y luego los mostrará. Lo que esto significa es que no tenemos que decirle a nuestra aplicación que busque datos nuevamente cuando creamos una nueva tarea o completamos una. Nuestra aplicación lo sabrá.

Ahora creemos el módulo de acciones. Dentro del directorio src crea nuevas acciones de carpeta. Y aquí crea archivos index.js y types.js. El archivo de tipos solo almacena constantes de cadena para los tipos de acción. El índice es el punto de entrada para nuestro módulo de acciones y contendrá exactamente 3 acciones. addToDo agregará una nueva tarea a la lista de tareas, completeToDo la eliminará. Y fetchToDos escuchará los cambios y, si hay algunos, buscará los datos. Entonces llamará al método de despacho. Este método toma un argumento que es objeto con tipo y carga útil. Tipo representa el tipo de acción para que el reductor sepa si debe manejar la acción. Y la carga útil representa datos reales.

Ahora es el momento de unir todas estas cosas usando el componente React. Pero primero creemos su propia aplicación Firebase primero

Crear una aplicación Firebase

  1. Vaya a https://console.firebase.google.com/u/0/
  2. Inicie sesión con su cuenta de Google y luego haga clic en Agregar proyecto
  3. Establezca el nombre y la región de su proyecto y haga clic en Crear proyecto
  4. Deberías ver el panel de Firebase
Tablero de Firebase

Ahora creemos el archivo de configuración de Firebase que realmente le dice al SDK de Firebase qué aplicación estamos usando. Dentro del directorio config crear keys.js. Esto verificará si estamos en modo de producción o no. Lo que no quieres compartir tus llaves. Creamos dev.js y prod.js. El archivo de desarrollo contendrá cadenas reales, pero nunca publicará este archivo. El archivo prod solo hará referencia a las variables de entorno.

Ahora solo necesita completar dev.js con sus valores reales. La clave API y la ID del proyecto se pueden encontrar en la configuración del proyecto dentro del panel de Firebase. Para configurar la base de datos, siga estos pasos

Después de eso, puede ver la URL de su base de datos. Debería ser

" .firebaseio.com"

Escriba todos estos valores en dev.js y su aplicación Firebase está conectada con firebase SDK. Ahora es el momento de unir todas estas partes y el resultado será una aplicación funcional

Combinando todos juntos

Tenemos todo preparado ahora, solo necesitamos crear 2 componentes y conectarlos para almacenarlos. Tendremos ToDoListItem y ToDoList.

Dentro del directorio src crea nuevos componentes de directorio. Aquí crea ToDoListItem.js. Este componente solo representa la tarea real. Muestra cuál es la tarea real y contiene un botón. Cuando se hace clic en el botón. La tarea se completa y se elimina. Estamos utilizando la acción completeToDo en este componente. Para adjuntar acciones a este componente, estamos utilizando el método de conexión. Se necesitan 2 argumentos. Primero es la función que está tomando datos de la tienda y el segundo es el objeto que contiene acciones.

Ahora para el componente ToDoList. Contendrá una forma simple para crear una nueva tarea. Este formulario aparecerá cuando hagamos clic en el botón Agregar. Y desaparecerá cuando hagamos clic de nuevo. Este componente activará la acción addToDo al enviar el formulario. Y escuchará los cambios en la base de datos usando la acción fetchToDos. Nuevamente haremos uso del método de conexión. Esta vez también toma la función mapStateToProps. Allí le decimos que queremos acceder a los datos de la tienda. Si los datos en la tienda se actualizan, nuestro componente también se actualiza. Finalmente, también creemos un archivo CSS para este componente e importémoslo.

Tenemos todo configurado. Ahora lo último es cambiar el componente de la aplicación para usar ToDoList. Y nuestra aplicación está terminada.

Y eso fue todo. Creamos una tienda con reductores y la adjuntamos a nuestra aplicación. Creamos un módulo de acciones y luego activamos estas acciones en nuestros componentes. Creamos 2 componentes. El componente está conectado a la tienda y también puede desencadenar acciones. Y esto dio como resultado una aplicación ToDo funcional. El código fuente de la aplicación está disponible en Github.

Lo malo de esto es que se puede usar con múltiples usuarios. Porque ahora no estamos rastreando a quién pertenece la tarea. Lo haremos en la próxima publicación. Le mostraremos cómo hacer la autorización con firebase e implementaremos la aplicación en el mundo real.

Gracias por tu atención. Si te gustó la historia y aprendiste algo nuevo, avísale al mundo aplaudiendo. Si desea ver más, presione el botón "Seguir". Estoy creando tutoriales como este todas las semanas. Si no estás familiarizado con reaccionar, tengo una serie de tutoriales para que comiences. Puede consultarlos aquí https://medium.com/@bernardbad. Gracias por su atención nuevamente y hasta la próxima.