It’s #FrontendFriday – Statemanagement in ReactJS mit MobX

16.08.2019

Hallo Zusammen & einen schönen Frontend Friday, heute geht es um das Statemanagement in ReactJS mit MobX.

Was ist ReactJS?

ReactJS ist eine Library für die Entwicklung von User Interfaces in JavaScript.

Die Library ist Komponenten-basiert und ermöglicht eine gute Modularisierung zur Verringerung der Abhängigkeiten und Komplexität.

Was ist MobX überhaupt?

MobX ist eine Library mit der sich das Statemanagement in JavaScript Anwendungen vereinfachen lässt.

Was ist der Unterschied zwischen Redux und MobX?

In Redux wird das Flux Pattern verwendet, wohingegen in MobX das Observer Pattern genutzt wird. MobX ist weniger Komplex und hat deutlich weniger Overhead. Allerdings spiegelt sich dies auch in der Funktionalität der zwei Libraries wider. Redux ist derzeit der Industriestandard für Reactanwendungen und bietet deutlich mehr Funktionalitäten, allerdings werden diese oft nicht benötigt.

ReactJS & MobX?

Die Kombination aus ReactJS & MobX wird heutzutage oft verwendet.

ReactJS ist zuständig für das Rendering der Templates auf Basis des Status der Anwendung. Dazu werden von ReactJS unterschiedliche Lifecyclemethoden sowie Rendering Methoden bereitgestellt.

MobX bietet dann Funktionalitäten zum Speichern und Aktualisieren vom Anwendungsstatus, welcher dann von ReactJS verwendet werden kann.

 

State

Der State repräsentiert den Anwendungsstatus durch Objekte, Arrays, Primitive Typen & Referenzen die das Datenmodel der Anwendung darstellen.

Derivations

Derivations oder in Deutsch Ableitungen, sind alle Objekte, welche durch den Anwendungsstatus automatisch berechnet werden können. Ein Beispiel dafür könnte der Besucherzähler einer Website darstellen.

 

Reactions

Reactions unterscheiden sich von Derivations hauptsächlich darin, dass Sie keinen Wert zur Verfügung stellen, sondern in der Regel dafür sorgen, dass der DOM aktualisiert wird oder das Netzwerkanfragen zur richtigen Zeit durchgeführt werden.

Actions

Actions sind alle Aktionen, welche den Anwendungsstatus ändern. MobX sorgt dafür, dass alle Actions automatisch auf Basis der Derivations und Reactions synchron durchgeführt werden.

 

Herausforderung & Strategie von MobX

Die Hauptproblematik im Statemanagement stellt die Inkonsistenz zwischen lokalen Variablen und dem Status der Anwendung dar. Deshalb verfolgen viele Statemanagementkonzepte das Ziel, die Art und Weise einzuschränken, wie der Zustand der Anwendung sich ändern lässt. Eine mögliche Maßnahme in diesem Konzept wäre es, den Status der Anwendung unveränderlich zu machen, dazu müssten dann allerdings Daten normalisiert werden.

MobX hingegen verfolgt ein anderes Ziel:

Es soll unmöglich werden einen inkonsistenten Zustand zu erzeugen.

Dieses Grundproblem lässt sich lösen, indem einfach alle Änderungen automatisch abgeleitet werden. Somit können lokale Variablen und der Anwendungsstatus nicht inkonsistent werden.

 

Wie funktioniert das in der Praxis?

Ohne MobX Mit MobX
class TodoStore {
    todos = [];
​
    get completedTodosCount() {
        return this.todos.filter(
            todo => todo.completed === true
        ).length;
    }
​
    report() {
        if (this.todos.length === 0)
            return "<none>";
        return `Next todo: "${this.todos[0].task}". ` +
            `Progress: ${this.completedTodosCount}/${this.todos.length}`;
    }
​
    addTodo(task) {
        this.todos.push({
            task: task,
            completed: false,
            assignee: null
        });
    }
}
​
const todoStore = new TodoStore();
export class ObservableTodoStore {
    @observable todos = [];
   ​
    constructor() {
        mobx.autorun(() => console.log(this.report));
    }
​
    @computed get completedTodosCount() {
        return this.todos.filter(
            todo => todo.completed === true
        ).length;
    }
​
    @computed get report() {
        if (this.todos.length === 0)
            return "<none>";
        return `Next todo: "${this.todos[0].task}". ` +
            `Progress: ${this.completedTodosCount}/${this.todos.length}`;
    }
​
	@action addTodo(task) {
        this.todos.push({
            task: task,
            completed: false,
            assignee: null
        });
    }
}
​
const observableTodoStore = new ObservableTodoStore();
export default observableTodoStore;

Aufruf:

todoStore.addTodo("Hallo Welt :)");
console.log(todoStore.report());

Aufruf:

observableTodoStore.addTodo("Hallo MobX :)");

Auf der linken Seite ohne MobX, wird deutlich, dass all jene Methoden zusätzlich aufgerufen werden müssen, um den Anwendungsstatus konsistent zu halten.

Die rechte Seite mit MobX zeigt, wie über die Annotationen, alle notwendigen Aufgaben automatisiert werden und nicht mehr vergessen werden können.

Somit gibt es an dieser Stelle keine Möglichkeit den Status in einen inkosistenten Zustand zu bringen.

MobX und React zusammenbringen

Damit MobX in Reactkomponenten verwendet werden können, ist lediglich eine zusätzliche Annotation notwendig.

import { observer } from "mobx";
import ObservableTodoStore from './ObservableTodoStore';

@observer
class MyComponent extends React.Component {
  render() {
    return <button onClick={ObservableTodoStore.addTodo(this.props.input}>{this.props.title}</button>;
  }
}

 

Quellen:

https://reactjs.org/

https://mobx.js.org/getting-started.html

https://github.com/mobxjs/mobx

https://github.com/facebook/flux/tree/master/examples/flux-concepts

 

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*Pflichtfelder

*