MobX o Redux: ¿cuál es mejor para la gestión del estado de reacción?

En JavaScript, la gestión del estado es un tema candente en estos días. Cuando se trata de implementar la administración del estado, los desarrolladores a menudo encuentran difícil lidiar con el código repetitivo en Redux. Por lo tanto, MobX ha demostrado ser una buena alternativa a Redux, que ofrece la misma funcionalidad con menos código para escribir. Sin embargo, ambas herramientas de administración del estado funcionan bien con React.

Primero echemos un vistazo a las cosas comunes entre los dos:

1) Ambos admiten depuración de viajes en el tiempo
2) Ambos contienen bibliotecas de código abierto
3) Ambos proporcionan una gestión de estado del lado del cliente
4) Ambos brindan un gran soporte para React frameworks nativos

En este blog, hemos enumerado todos los pros y los contras de ambas soluciones de administración estatal. Ayudará a los desarrolladores web a elegir el mejor para su próximo proyecto. Antes de discutir esto, hemos comparado tanto Redux como Mobx en función de algunos parámetros, como se detalla a continuación:

-> Mantenimiento y escalable

Debido a la presencia de funciones puras y paradigma de programación funcional, Redux es más escalable y mantenible. Por lo tanto, las cosas se pueden controlar fácilmente con Redux.

-> Proceso de depuración

La depuración en Redux es una buena experiencia en comparación con MobX, ya que proporciona herramientas de desarrollador impresionantes y viene con menos abstracción. Con el paradigma de flujo, el Redux se vuelve más predecible. Por otro lado, debido a una mayor abstracción y herramientas de desarrollador promedio, la depuración en MobX es mucho más difícil.

-> Curva de aprendizaje

Aprender MobX es fácil ya que viene con una curva de aprendizaje constante. La presencia de la máxima abstracción facilita el aprendizaje y los desarrolladores de JavaScript que están familiarizados con los conceptos de OOP tienen una fortaleza en MobX. Por otro lado, Redux usa un paradigma de programación funcional que hace que sea difícil de entender de inmediato.

-> Comunidad

Redux tiene una gran base comunitaria en comparación con MobX. Por lo tanto, Redux brinda un excelente soporte comunitario a los desarrolladores en cualquier momento y en cualquier lugar.

-> Impuro vs puro

MobX es impuro ya que los estados pueden sobrescribirse. Aquí, puede actualizar fácilmente los estados con los nuevos valores. Sin embargo, Redux es puro ya que utiliza funciones puras. Aquí, los estados son de solo lectura y no se pueden sobrescribir directamente. El estado anterior se reemplaza con un nuevo estado.

-> Datos observables vs simples

MobX usa un observable para almacenar mientras que Redux usa datos Javascript normales para almacenar valores. En Redux, todas las actualizaciones se rastrean manualmente.

-> Tienda

Una tienda es algo donde se colocan los datos. MobX tiene más de una tienda donde estas tiendas están separadas lógicamente. Por otro lado, Redux tiene una gran tienda donde se almacenan todos los estados. Los datos generalmente se normalizan en Redux y los datos se mantienen desnormalizados en MobX.

Redux vs MobX: la comparación de código

Inyección de accesorios

La función connect () de React-redux se usa para pasar el estado y las acciones a los accesorios en Redux. Se muestra a continuación:

// acceso a accesorios

<ContactForm contact={this.props.contact} loading={this.props.loading} onSubmit={this.submit} /> 

// función para inyectar estado en accesorios

 function mapStateToProps(state) { return { contact: state.contactStore.contact, errors: state.contactStore.errors } } 

// inyectando tanto estado como acciones en accesorios

 export default connect(mapStateToProps, { newContact, saveContact, fetchContact, updateContact })(ContactFormPage); 

En MobX, inject se usa para inyectar la colección de las tiendas. Esto hará que las tiendas estén disponibles en accesorios. Aquí, se accede al estado y a las acciones a través de propiedades en el objeto de la tienda, por lo que no es necesario pasarlas por separado.

 @inject("stores") @observer // injecting store into props class ContactFormPage extends Component { … // accessing store via props const { contactStore:store } = this.props.stores; return ( <ContactForm store={store} form={this.form} contact={store.entity} /> ) … } 

Por lo tanto, utilizamos decoradores redux-connect para simplificar el código de Redux y la versión MobX siempre es fácil de leer. Por lo tanto, no hay un ganador tan claro.

Bootstrapping

En Redux, primero, defina la tienda y la aplicación se pasa a través del proveedor. Para manejar funciones asincrónicas, también necesita definir redux-thunk y redux-promise-middleware. Después de esto, redux-devtools-extension permite la depuración de la tienda en modo de viaje en el tiempo.

 import { applyMiddleware, createStore } from "redux"; import thunk from "redux-thunk"; import promise from "redux-promise-middleware"; import { composeWithDevTools } from 'redux-devtools-extension'; import rootReducer from "./reducers"; const middleware = composeWithDevTools(applyMiddleware(promise(), thunk)); export default createStore(rootReducer, middleware); 

// src / index.js

 ReactDOM.render( <BrowserRouter> <Provider store={store}> <App /> </Provider> </BrowserRouter>, document.getElementById('root') ); 

En MobX, se configuran varias tiendas. No necesita bibliotecas externas para manejar acciones asíncronas, sino solo unas pocas líneas de código. Necesita el mobx-remotedev para conectar la herramienta de depuración redux-devtools-extension.

 import remotedev from 'mobx-remotedev'; import Store from './store'; const contactConfig = { name:'Contact Store', global: true, onlyActions:true, filters: { whitelist: /fetch|update|create|Event|entity|entities|handleErrors/ } }; const contactStore = new Store('api/contacts'); const allStores = { contactStore: remotedev(contactStore, contactConfig) }; export default allStores; 

// src / index.js

 ReactDOM.render( <BrowserRouter> <Provider stores={allStores}> <App /> </Provider> </BrowserRouter>, document.getElementById('root') ); 

Sin embargo, la cantidad de código utilizada en ambos es la misma. Pero, MobX contiene menos declaraciones de importación.

Definiendo acciones y reductores

Las acciones y los reductores se definen en Redux mediante el siguiente código:

// acciones

 export function fetchContacts(){ return dispatch => { dispatch({ type: 'FETCH_CONTACTS', payload: client.get(url) }) } } 

// reductores

 switch (action.type) { case 'FETCH_CONTACTS_FULFILLED': { return { ...state, contacts: action.payload.data.data || action.payload.data, loading: false, errors: {} } } case 'FETCH_CONTACTS_PENDING': { return { ...state, loading: true, errors: {} } } case 'FETCH_CONTACTS_REJECTED': { return { ...state, loading: false, errors: { global: action.payload.message } } } } 

La lógica de acción y reductor se realiza en una clase en MobX. Utiliza OOP debido a que la clase Store se refactoriza para crear múltiples tiendas utilizando el constructor de la clase. El código respectivo se muestra a continuación:

 @action fetchAll = async() => { this.loading = true; this.errors = {}; try { const response = await this.service.find({}) runInAction('entities fetched', () => { this.entities = response.data; this.loading = false; }); } catch(err) { this.handleErrors(err); } } 

Entonces, hemos visto que la lógica definida en ambas soluciones de administración de estado hace el mismo trabajo. La única diferencia es que hemos utilizado 33 líneas de código en Redux y 14 líneas de código en MobX para lograr el resultado. Por lo tanto, puede crear aplicaciones más rápido con MobX.

¿Por qué usar MobX para las aplicaciones React?

MobX es una biblioteca probada que hace que la gestión de estado sea simple y escalable mediante la aplicación transparente de la programación reactiva funcional (TFRP). React y MobX es una combinación poderosa juntos.

• Menos código para escribir
• Fácil de aprender
• Los datos anidados son fáciles
• Soporte para programación orientada a objetos.

¿Por qué no usar MobX?

• Difícil de depurar
• Mejores alternativas presentes
• Da demasiada libertad

¿Por qué usar Redux para las aplicaciones React?

Redux es una biblioteca independiente que se puede usar con el marco de la interfaz de usuario que incluye Angular, Vue, Ember, React y vanilla JS.

• Extensibilidad a través de middlewares
• Popularidad y comunidad
• Soporte de herramientas
• Previsibilidad y simplicidad
• Flujo de datos unidireccional e inmutabilidad
• Separación de datos y presentación.

¿Por qué no usar Redux?

• Boilerplate (reductores, selectores, vistas, tipos de acción, creadores de acción, ...)
• Las acciones se desconectan de su efecto (como se define en el reductor)
• No hay una solución lista para usar para tratar los efectos secundarios (disponible a través de middlewares como redux-thunk o redux-saga)

Nota final:

Ahora, puede ver que la base del código MobX es mucho más ágil. Utilizando el estilo OOP y las buenas prácticas de desarrollo, puede crear rápidamente aplicaciones React. La principal desventaja es que es muy fácil escribir código pobre e imposible de mantener.

Por otro lado, Redux es popular y adecuado para construir proyectos grandes y complejos. Es un marco estricto con salvaguardas que garantiza que cada desarrollador escriba código que sea fácil de probar y mantener. Sin embargo, no es adecuado para proyectos pequeños.

Espero haber proporcionado suficiente información para aclarar si migrar a MobX o continuar con Redux. En última instancia, la decisión depende del tipo de proyecto en el que esté trabajando y de los recursos disponibles para usted.