MobX oder Redux: Was ist besser für das React State Management?

In JavaScript ist die Zustandsverwaltung heutzutage ein heißes Thema. Wenn es um die Implementierung von State Management geht, ist es für Entwickler häufig eine Herausforderung, mit Code von Boilerplate in Redux umzugehen. Daher hat sich MobX als eine gute Alternative zu Redux erwiesen, die dieselbe Funktionalität mit weniger Code zum Schreiben bietet. Beide Statusverwaltungstools funktionieren jedoch gut mit React.

Schauen wir uns zunächst die Gemeinsamkeiten an:

1) Beide unterstützen das Zeitreise-Debugging
2) Beide enthalten Open-Source-Bibliotheken
3) Beide bieten eine clientseitige Statusverwaltung
4) Beide bieten enorme Unterstützung für native React-Frameworks

In diesem Blog haben wir alle Vor- und Nachteile beider State-Management-Lösungen aufgelistet. Es wird Webentwicklern helfen, das beste für ihr nächstes Projekt auszuwählen. Bevor wir darauf eingehen, haben wir Redux und Mobx anhand der folgenden Parameter verglichen:

-> Wartung & Skalierbar

Aufgrund des Vorhandenseins reiner Funktionen und des funktionalen Programmierparadigmas ist Redux skalierbarer und wartbarer. Mit Redux lassen sich die Dinge einfach steuern.

-> Debug-Prozess

Das Debuggen in Redux ist im Vergleich zu MobX eine gute Erfahrung, da es hervorragende Entwicklertools bietet und weniger abstrahiert. Mit dem Flussparadigma wird der Redux vorhersehbarer. Auf der anderen Seite ist das Debuggen in MobX aufgrund von mehr Abstraktion und durchschnittlichen Entwicklertools sehr viel schwieriger.

-> Lernkurve

Das Erlernen von MobX ist einfach, da es eine stetige Lernkurve aufweist. Das Vorhandensein maximaler Abstraktion erleichtert das Lernen und JavaScript-Entwickler, die mit OOP-Konzepten vertraut sind, haben eine Hochburg in MobX. Auf der anderen Seite verwendet Redux ein funktionales Programmierparadigma, das es schwierig macht, es auf Anhieb zu verstehen.

-> Gemeinschaft

Redux hat im Vergleich zu MobX eine große Community-Basis. Daher bietet Redux Entwicklern jederzeit und an jedem Ort großartigen Community-Support.

-> Unrein vs rein

MobX ist unrein, da die Zustände überschrieben werden können. Hier können Sie einfach die Status mit den neuen Werten aktualisieren. Redux ist jedoch rein, da es reine Funktionen verwendet. Hier sind die Zustände schreibgeschützt und können nicht direkt überschrieben werden. Der vorherige Status wird durch einen neuen Status ersetzt.

-> Observable vs plain data

MobX verwendet eine Observable zum Speichern, während Redux normale Javascript-Daten zum Speichern von Werten verwendet. In Redux werden alle Updates manuell nachverfolgt.

-> Speichern

In einem Geschäft werden Daten abgelegt. MobX hat mehr als ein Geschäft, in dem diese Geschäfte logisch getrennt sind. Auf der anderen Seite hat Redux ein großes Geschäft, in dem alle Zustände gespeichert sind. Die Daten werden normalerweise in Redux normalisiert und die Daten werden in MobX denormalisiert.

Redux vs MobX: Der Code-Vergleich

Requisiten Injektion

Die connect () -Funktion von React-Redux wird verwendet, um Status und Aktionen an Requisiten in Redux zu übergeben. Es wird unten gezeigt:

// auf Requisiten zugreifen

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

// Funktion zum Einspritzen des Zustands in Requisiten

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

// Injizieren von Status und Aktionen in Requisiten

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

In MobX wird inject verwendet, um die Auflistung der Stores zu injizieren. Dadurch werden die Läden in Requisiten verfügbar. Hier wird auf Status und Aktionen über Eigenschaften im Geschäftsobjekt zugegriffen, sodass sie nicht separat übergeben werden müssen.

 @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} /> ) … } 

Daher haben wir Redux-Connect-Dekoratoren verwendet, um den Redux-Code zu vereinfachen, und die MobX-Version ist immer leicht zu lesen. Daher kein so klarer Gewinner.

Bootstrapping

In Redux definieren Sie zunächst den Store und die App wird über den Provider übergeben. Um asynchrone Funktionen zu verarbeiten, müssen Sie außerdem Redux-Thunk- und Redux-Promise-Middleware definieren. Danach ermöglicht die Erweiterung redux-devtools das Debuggen des Speichers im Zeitreisemodus.

 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') ); 

In MobX werden mehrere Stores eingerichtet. Es werden keine externen Bibliotheken für asynchrone Aktionen benötigt, sondern nur einige Codezeilen. Sie benötigen mobx-remotedev, um das Debugging-Tool redux-devtools-extension anzuschließen.

 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') ); 

Die Menge des in beiden verwendeten Codes ist jedoch gleich. MobX enthält jedoch weniger Importanweisungen.

Definieren von Aktionen und Reduzierungen

Aktionen und Reduzierungen werden in Redux durch folgenden Code definiert:

// Aktionen

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

// Reduzierungen

 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 } } } } 

Die Logik für Action & Reducer wird in einer Klasse in MobX erstellt. Es wird OOP verwendet, aufgrund dessen die Store-Klasse überarbeitet wird, um mithilfe des Klassenkonstruktors mehrere Stores zu erstellen. Der entsprechende Code wird unten angezeigt:

 @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); } } 

Wir haben also gesehen, dass die in beiden Zustandsverwaltungslösungen definierte Logik die gleiche Aufgabe erfüllt. Der einzige Unterschied besteht darin, dass wir 33 Codezeilen in Redux und 14 Codezeilen in MobX verwendet haben, um das Ergebnis zu erzielen. Daher können Sie mit MobX Apps schneller erstellen.

Warum MobX for React Apps verwenden?

MobX ist eine getestete Bibliothek, die das Statusmanagement einfach und skalierbar macht, indem funktionale reaktive Programmierung (TFRP) transparent angewendet wird. React und MobX bilden eine leistungsstarke Kombination.

• Weniger Code zum Schreiben
• Leicht zu erlernen
• Verschachtelte Daten sind einfach
• Unterstützung für objektorientierte Programmierung

Warum nicht MobX benutzen?

• Schwer zu debuggen
• Bessere Alternativen vorhanden
• Gibt zu viel Freiheit

Warum sollten Sie Redux für React-Apps verwenden?

Redux ist eine eigenständige Bibliothek, die mit UI-Frameworks wie Angular, Vue, Ember, React und Vanilla JS verwendet werden kann.

• Erweiterbarkeit über Middleware
• Popularität & Gemeinschaft
• Werkzeugunterstützung
• Vorhersehbarkeit und Einfachheit
• Unidirektionaler Datenfluss und Unveränderlichkeit
• Datentrennung & Präsentation

Warum nicht Redux benutzen?

• Boilerplate (Reduzierungen, Selektoren, Ansichten, Aktionstypen, Aktionsersteller, ...)
• Aktionen werden von ihrer Wirkung getrennt (wie im Reduzierer definiert)
• Keine sofort einsatzbereite Lösung für den Umgang mit Nebenwirkungen (erhältlich über Middleware wie Redux-Thunk oder Redux-Saga)

Schlussbemerkung:

Jetzt können Sie sehen, dass die MobX-Codebasis wesentlich agiler ist. Mithilfe des OOP-Stils und guter Entwicklungspraktiken können Sie schnell React-Anwendungen erstellen. Der Hauptnachteil ist, dass es sehr einfach ist, schlechten Code zu schreiben und nicht zu warten.

Andererseits ist Redux sehr beliebt und eignet sich für den Bau großer und komplexer Projekte. Es ist ein strenger Rahmen mit Sicherheitsvorkehrungen, der sicherstellt, dass jeder Entwickler Code schreibt, der einfach zu testen und zu warten ist. Für kleine Projekte ist es jedoch nicht geeignet.

Ich hoffe, ich habe genügend Informationen zur Verfügung gestellt, um zu klären, ob ich auf MobX migrieren oder mit Redux fortfahren soll. Letztendlich hängt die Entscheidung von der Art des Projekts ab, an dem Sie arbeiten, und von den Ressourcen, die Ihnen zur Verfügung stehen.