React con Mobx, manejo del estado de forma sencilla
React con Mobx, manejo del estado de forma sencilla
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!



Mobx es otra herramienta para javascript la cual nos ayuda a controlar el estado de nuestra aplicación, es decir, todo aquello que a lo largo de vida de la aplicación va cambiando.

La principal diferencia con Redux es su sencillez, en lugar de trabajar con Acciones y Reducers, toda la aplicación es manejada por una store la cual sabe cómo manejar la información reactiva a través de observables.

Nosotros vamos a crear un ejemplo sencillo pero muy claro para ver lo sencillo que es utilizar React con Mobx, si todavía no conoces React, recuerda que aquí tienes un curso completo para iniciarte desde 0.

Si tienes dudas a la hora de crear el proyecto con react utilizando decoradores, simplemente sigue esta entrada, una vez lo tengamos vamos a instalar las siguientes dependencias para poder utilizar Mobx en React.

Finalmente, abre el archivo index.js y modifica el código por el siguiente, el cual contiene el ejemplo completo.

La clase ObservableTodoStore es nuestra tienda (store), aquí definimos los datos de la aplicación, mobx.autorun será ejecutado cada vez que el estado cambie, con @computed creamos propiedades calculadas, el método addTodo simplemente añade una nueva tarea al array todos, que cómo puedes ver es un observable, de esta forma mobx evtia el uso de acciones y reducers, haciendo uso de observables es capaz de actualizar los datos de toda nuestra aplicación cada vez que éstos cambien.

Para convertir los componentes de React en Componentes Reactivos simplemente debemos utilizar el decorador @observer al declara la clase, de esta forma los datos será actualizados de forma automática cada vez que el estado haya cambiado