Recientemente, declarar la muerte de Redux se ha vuelto bastante popular en la comunidad de desarrollo web. Aunque esto no es necesariamente cierto, anima a los desarrolladores a buscar alternativas a Redux y otras soluciones de gestión de estados.
Rematch es una de esas soluciones. Se basa en una base sólida que es el núcleo de Redux mientras que limita el boilerplate, siguiendo las mejores prácticas de Redux, y proporcionando una gran experiencia de desarrollo. ¡Vamos a echar un vistazo más de cerca y ver cómo se compara con Redux!
Rematch
Rematch no es una biblioteca nueva. Existe desde hace unos cuatro años y su popularidad no ha dejado de crecer. Al estar basada en Redux, es sólo un poco más grande que el propio núcleo de Redux – 4,3 KB frente a 4,7 KB (alrededor de 1,7 KB Gzipped), y sin embargo, se las arregla para eliminar toneladas de boilerplate y proporcionar un montón de características adicionales.
Para dar una visión general de algunas de las características de la Rematch:
- Construido sobre Redux – permitiendo una fácil migración, interoperabilidad de código, uso de Redux Devtools, y más;
- Reducción de la repetición de tareas: las sentencias switch, thunks y otras se manejan de forma inmediata;
- Escrito en TypeScript – con todas las bondades del autocompletado incluidas;
- API de plugins: amplíe fácilmente Rematch con plugins personalizados o de terceros;
- Independiente del framework – funciona muy bien con React, pero también con Vue, Angular y otros;
- Efectos secundarios incorporados – sin redux-thunks, sólo async/await;
Como puede ver, esta biblioteca tiene mucho que ofrecer, y con un enfoque en la experiencia de desarrollo, parece ser una excelente opción para su próximo proyecto.
Cómo empezar con Rematch
Para ver cómo es el uso de Rematch, vamos a probarlo para experimentar su API y aprender sus conceptos.
Empieza por instalar la biblioteca:
npm install @rematch/core
Una vez hecho esto, estás listo para lanzarte a 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 son el corazón de Rematch. Son la principal fuerza impulsora de la reducción de boilerplate y ayudan a aplicar las mejores prácticas de Redux.
Para crear un modelo, todo lo que necesitas es definir un objeto con propiedades específicas. Puedes hacerlo directamente o con el ayudante createModel() para la interferencia de tipos.
Un modelo utiliza propiedades como:
- state – Para definir el estado inicial;
- reductores – Para contener funciones puras para realizar cambios de estado;
- efectos – Para efectos secundarios asíncronos.
Estas y otras propiedades encapsulan y simplifican la mayor parte del boilerplate de Redux a un único objeto con un conjunto determinado de funcionalidades. En el ejemplo anterior, countModel contiene el estado del contador, así como los reductores y efectos para cambiarlo.
Para utilizar su modelo, cree un nuevo store utilizando la función init().
import { init } from "@rematch/core";
// ...
const store = init({
models: {
count: countModel,
},
});La función init() acepta un objeto config con propiedades como modelos o plugins y devuelve un store Redux completamente configurado con funcionalidad adicional de Rematch.
Con el fragmento anterior, estamos creando un nuevo store utilizando el countModel previamente definido – aquí registrado bajo un nombre count.
El store creado tiene toda la funcionalidad de uno Redux, incluyendo métodos como dispatch() o subscribe(). Además de eso, Rematch inserta allí sus propias funcionalidades personalizadas, como el método addModel() para la carga perezosa de nuevos modelos o dispatchers de acciones de acceso directo bajo dispatch. Esto ú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 dispatchers de acciones, puedes acceder a todos tus reductores y funciones de efectos con una API simplificada bajo dispatch[MODEL_NAME]. Personalmente, considero que este enfoque es mucho más limpio y agradable que una función directa de dispatch().
Así que eso es prácticamente todo lo que necesitas saber sobre Rematch para empezar. Por supuesto, hay mucho más que Rematch tiene que ofrecer, como plugins, integración con Redux Devtools, compatibilidad con integraciones como react-redux, y más. Sin embargo, los fundamentos son sencillos, y usted puede poco a poco recoger las otras características si y cuando usted los necesita.
Repetición de la sesión de código abierto
Depurar una aplicación web en producción puede ser un reto y consumir mucho tiempo. OpenReplay es una alternativa de código abierto a FullStory, LogRocket y Hotjar. Te permite monitorizar y reproducir todo lo que hacen tus usuarios y muestra cómo se comporta tu aplicación para cada problema. Es como tener el inspector de tu navegador abierto mientras miras por encima del hombro de tu usuario. OpenReplay es la única alternativa de código abierto disponible actualmente.
Comienza a monitorizar tu aplicación web de forma gratuita.
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 boilerplate, 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 la mejor opción para la mayoría de los proyectos, especialmente si se empieza desde cero. No sólo es fácil de entender, limpio y simple, sino que también se puede ampliar fácilmente cuando sea necesario utilizando su API de plugins. Redux Toolkit es simplemente una herramienta un poco más compleja de entender, ralentizando el desarrollo.
También hay que tener en cuenta el tamaño del paquete y el rendimiento. 32,1 KB frente a 4,7 KB no es una diferencia pequeña. Claro, Redux Toolkit tiene más características incorporadas, pero puede que no las necesites todas, y la API de plugins de Rematch te da más control sobre lo que se utiliza.
Conclusión
En definitiva, te recomiendo que pruebes Rematch. Es fácil de aprender y agradable de usar, tanto si eres un usuario nuevo como experimentado de Redux. Su API minimalista y accesible hace que sea una gran experiencia de desarrollo y gracias a sus raíces Redux siempre se puede recurrir al ecosistema establecido de Redux si y cuando sea necesario.
