Rematch - ¿Un mejor Redux?

Recientemente, declarar muerto a Redux se ha vuelto bastante popular en la comunidad de desarrollo web. Si bien esto no es necesariamente cierto, alienta a los desarrolladores a buscar alternativas de Redux y otras soluciones de administración de estado.

Rematch es una de esas soluciones. Se basa en una base sólida que es el núcleo de Redux al tiempo que limita el modelo estándar, sigue las mejores prácticas de Redux y proporciona una gran experiencia de desarrollo. ¡Echemos un vistazo más de cerca y veamos cómo se compara con Redux!

Rematch

 

Rematch no es una biblioteca nueva. Ha existido durante unos cuatro años y ha ido creciendo constantemente en popularidad. Al estar basado en Redux, es solo un poco más grande que el núcleo de Redux en sí: 4,3 KB frente a 4,7 KB (aproximadamente 1,7 KB comprimido en Gzip) y, sin embargo, se las arregla para eliminar toneladas de texto estándar y proporcionar una gran cantidad de características adicionales.

Para darle una descripción general de algunas de las características de Rematch:

• Construido sobre Redux: permite una fácil migración, interoperabilidad de código, uso de Redux Devtools y más;
• Código estándar reducido: las declaraciones de cambio, los thunks y otros se manejan de forma inmediata;
• Escrito en TypeScript, con todas las bondades de autocompletado incluidas;
• API de complementos: amplíe fácilmente Rematch con complementos personalizados o propios;
• Independiente del marco: funciona muy bien con React, pero también con Vue, Angular y otros;
• Efectos secundarios incorporados: sin redux-thunks, solo async/ await;

Como puede ver, esta biblioteca tiene muchas ventajas y, con un enfoque en la experiencia de desarrollo, parece ser una excelente opción para su próximo proyecto.

 

Empezando con Rematch

Para ver cómo es usar Rematch, probémoslo para experimentar su API y aprender sus conceptos.

Empiece por instalar la biblioteca:

npm install @rematch/core

Una vez hecho esto, estás listo para saltar y crear tu primer modelo de Rematch.

const countModel = {
  state: 0,
  reducers: {
    increment(state, payload) {
      return state + payload;
    },
  },
  effects: (dispatch) => ({
    async incrementAsync(payload) {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      dispatch.count.increment(payload);
    },
  }),
};

Los modelos están en el corazón de Rematch. Son la principal fuerza impulsora detrás de la reducción estándar y ayudan a hacer cumplir las mejores prácticas de Redux.

Para generar un modelo, todo lo que necesita es definir un objeto con propiedades específicas. Puede hacerlo directamente o con un createModel() ayudante para la interferencia de tipos.

Un modelo usa propiedades como:

• state - Para definir el estado inicial;
• reducers - Para contener funciones puras para realizar cambios de estado;
• effects - Para efectos secundarios asíncronos.

Estas y otras propiedades encapsulan y simplifican la mayor parte del texto estándar de Redux a un solo objeto con un conjunto dado de funcionalidades. En el ejemplo anterior, countModelcontiene el estado del contador, así como los reductores y efectos para cambiarlo.

Para utilizar el modelo, genere una nueva store usando la init() función.

import { init } from "@rematch/core";

// ...

const store = init({
  models: {
    count: countModel,
  },
});

 

La init() función acepta un objeto de configuración con propiedades como modelso pluginsy devuelve una tienda Redux completamente configurada con funcionalidad adicional Rematch.

Con el fragmento anterior, estamos creando una nueva tienda utilizando la que se definió anteriormente countModel, aquí registrada con un nombre count.

La store creada tiene toda la funcionalidad de una Redux, incluidos métodos como dispatch() o subscribe(). Además de eso, Rematch inserta allí sus propias características personalizadas, como el addModel() método para cargar modelos nuevos de forma diferida o los despachadores de acciones de acceso directo debajo dispatch. Este último es especialmente útil para cambiar su estado.

// ...
const { dispatch } = store;

dispatch({ type: "count/increment", payload: 1 });
dispatch.count.increment(1); 

dispatch({ type: "count/incrementAsync", payload: 1 });
dispatch.count.incrementAsync(1);

 

Con los despachadores de acciones, puede acceder a todas sus funciones de reductores y efectos con una API simplificada en dispatch[MODEL_NAME]. Personalmente, considero este enfoque mucho más limpio y agradable que una dispatch() función directa.

Eso es prácticamente todo lo que necesitas saber sobre Rematch para comenzar. Por supuesto, hay mucho más que Rematch tiene para ofrecer, como complementos, integración de Redux Devtools , compatibilidad con integraciones como react-redux y más. Sin embargo, los conceptos básicos son sencillos y puede ir adquiriendo las otras funciones lentamente cuando las necesite.

 

Reproducción de sesión de código abierto

La depuración de una aplicación web en producción puede ser un desafío y llevar mucho tiempo. OpenReplay es una alternativa de código abierto a FullStory, LogRocket y Hotjar. Le permite monitorear y reproducir todo lo que hacen sus usuarios y muestra cómo se comporta su aplicación para cada problema. Es como tener el inspector de su navegador abierto mientras mira por encima del hombro de su usuario. OpenReplay es la única alternativa de código abierto disponible actualmente.

 

Redux Toolkit vs Rematch

La única pregunta que queda por responder es cómo se compara Rematch con Redux Toolkit . Después de todo, el Toolkit es actualmente el recurso para el desarrollo moderno de Redux y proporciona características muy similares a Rematch.

Al igual que Rematch, Redux Toolkit minimiza el texto estándar, sigue las mejores prácticas y proporciona una buena experiencia de desarrollo. También tiene algunas características adicionales como RTK Query.

Personalmente, creo que Rematch es una mejor opción para la mayoría de los proyectos, especialmente si está comenzando desde cero. No solo es fácil de entender, limpio y simple, sino que también se puede ampliar fácilmente cuando sea necesario utilizando su API de complemento. Redux Toolkit es simplemente una herramienta un poco más compleja de entender, lo que ralentiza el desarrollo.

El tamaño y el rendimiento del paquete también son algo a considerar. 32,1 KB frente a 4,7 KB no es una diferencia pequeña. Claro, Redux Toolkit tiene más funciones integradas, pero es posible que no las necesite todas, y la API de complemento de Rematch le brinda más control sobre lo que se usa.