Introducción

Crear grandes aplicaciones web puede ser complicado, especialmente cuando tienes mucha información diferente de la que realizar un seguimiento. Pero no te preocupes, ¡RxJS está aquí para ayudarte! Es como una herramienta realmente genial que te ayuda a administrar todos tus datos en un solo lugar.

Con RxJS, puedes crear estas cosas llamadas "flujos de datos" que diferentes partes de tu aplicación pueden usar. Es como un gran río que fluye a través de tu aplicación, manteniendo todo conectado y sincronizado.

En este artículo, le mostraremos cómo usar RxJS para crear aplicaciones web que sean realmente fáciles de administrar y funcionen muy bien. Al final del artículo, sabrá cómo usar RxJS para administrar todos sus datos y crear aplicaciones web aún más grandes y mejores.

¿Por qué RxJS para la gestión estatal?

Oye, ¿alguna vez te confundes cuando estás creando una gran aplicación web y tienes mucha información diferente de la que realizar un seguimiento? ¡Ahí es donde entra RxJS! Es como una biblioteca realmente genial que te ayuda a administrar todos tus datos en un solo lugar.

Con RxJS, puedes crear flujos de datos que diferentes partes de tu aplicación pueden usar. Es como un río que fluye a través de tu aplicación, manteniendo todo conectado y sincronizado.

RxJS también te ayuda a dividir tu aplicación en partes más pequeñas, lo que es como tener diferentes habitaciones en tu casa para diferentes cosas. De esa manera, será más fácil mantener todo organizado y encontrar lo que necesitas.

En general, RxJS es una gran herramienta para administrar datos en grandes aplicaciones web. Ya sea que estés creando una aplicación simple o una realmente grande, ¡RxJS puede ayudarte a mantener todo bajo control!

Un ejemplo de lista de tareas pendientes

La forma más sencilla de aplicar una nueva tecnología o una nueva prueba de concepto es hacer una lista de tareas pendientes.

La tienda:

const subject = new Subject();

const initialState: Task[] = [];

let state = initialState;

export const todoStore = {
  init: () => {
    subject.next(state);
  },
  subscribe: (setState: any) => {
    subject.subscribe(setState);
  },
  addTask: (content: string) => {
    const task = {
      content,
      id: uid(),
      isDone: false,
    };
    state = [...state, task];
    subject.next(state);
  },
  removeTask: (id: string) => {
    const tasks = state.filter((task) => task.id !== id);
    state = tasks;
    subject.next(state);
  },
  completeTask: (id: string) => {
    const tasks = state.map((task) => {
      if (task.id === id) {
        task.isDone = !task.isDone;
      }
      return task;
    });
    state = tasks;
    subject.next(state);
  },
  initialState,
};

Este código define una tienda simple para administrar una lista de tareas pendientes usando RxJS. La tienda se implementa mediante un Asunto y proporciona métodos para agregar, eliminar y completar tareas.

La función init inicializa la tienda publicando el estado actual en el sujeto usando sujeto.next(estado). Esta función generalmente se llama cuando la aplicación se carga por primera vez para garantizar que la tienda esté actualizada.

La función de suscripción permite que los componentes se suscriban a los cambios en la tienda. Cuando se actualiza la tienda, se llamará a la función setState pasada para suscribirse con el estado actualizado. Esta función suele ser utilizada por componentes que necesitan mostrar el estado actual de la tienda.

En general, init y subscribe son dos funciones importantes en este código que permiten a los desarrolladores administrar el estado de una lista de tareas pendientes utilizando RxJS.

Uso:

Es muy fácil implementar este tipo de gestión estatal, solo haz este en el nivel más alto:

const [tasks, setTasks] = useState([]);

  useEffect(() => {
    todoStore.subscribe(setTasks);
    todoStore.init();
  });

Este código usa enlaces de React para suscribirse e inicializar una tienda que administra una lista de tareas pendientes usando RxJS.

El gancho useState crea una variable de estado llamada tareas y una función llamada setTasks para actualizar ese estado. El argumento [] pasado a useState establece el valor inicial de las tareas en una matriz vacía.

El gancho useEffect se utiliza para suscribirse e inicializar todoStore. La línea todoStore.subscribe(setTasks) suscribe la función setTasks a los cambios en la tienda. Esto significa que cada vez que se actualiza la tienda, se llamará a setTasks con el estado actualizado y las tareas se actualizarán en consecuencia.

La función todoStore.init() inicializa la tienda publicando el estado actual en el sujeto usando sujeto.next(estado).

Conclusión

¡Eso es todo! Hemos aprendido a usar RxJS y React para crear una aplicación de lista de tareas pendientes. Usamos RxJS para administrar el estado de la aplicación y React para mostrar el estado actual al usuario.

Vimos cómo RxJS proporciona un poderoso conjunto de herramientas para administrar el estado, incluidos observables, operadores y sujetos. Y también aprendimos cómo usar enlaces de React como useState y useEffect para actualizar el estado de la aplicación en tiempo real.

Al usar RxJS y React juntos, hemos creado una aplicación genial que es fácil de usar y mantener. ¡Y hemos aprendido algunas habilidades realmente valiosas que podemos utilizar para crear aplicaciones web aún más sorprendentes en el futuro!

Si crees que el artículo es demasiado oscuro, consulta estos:

• Código fuente: https://github.com/starneit/rxjs-state-poc
• Demostración: https://rxjs-poc.web.app/