JavaScript: EinfĂĽhrung in React

Seite 5: Aktionen und Fazit

Inhaltsverzeichnis

In einer React-App läuft ein Großteil der Interaktionen über Actions. Action Creators sind semantische Hilfsmethoden, die die Actions zum zentralen Dispatcher senden. Sie lassen sich in den Event Handlers der Views oder bei Antwort vom Server ausführen.

var AppDispatcher = require('../dispatcher/AppDispatcher');
var TodoConstants = require('../constants/TodoConstants');
var TodoActions = {
updateText: function(id, text) {
AppDispatcher.dispatch({
actionType: TodoConstants.TODO_UPDATE_TEXT,
id: id,
text: text
});
}
};
module.exports = TodoActions;

In einer Flux-Anwendung bewegt sich der gesamte Datenflow nur in eine Richtung (Abb. 3).


Während es vor ein paar Jahren noch kaum denkbar war, eine komplette Anwendung in JavaScript zu entwickeln, migrieren heute viele Firmen ihre Webseiten auf flexible Frameworks wie React. Das isomorphe Projekt lässt sich auf dem Server ausführen und erhöht dadurch die Performance im Browser. Zugleich ergibt sich so für suchmaschinenrelevante Seiten ein angenehmer Vorteil, und die Möglichkeit, Code sowohl auf Client- als auch auf Serverseite zu nutzen, spart eine Menge Entwicklungsaufwand.

Durch das virtuelle DOM gestalten sich Unit-Tests der Anwendung ebenfalls einfacher, denn mit der Übergabe von state in den einzelnen Komponenten lässt sich das generierte HTML prüfen. Mehr zum Thema Testen und ein tieferer Einblick in diverse Flux-Implementierungen gibt es im zweiten Teil des Artikels – "React in der Praxis".

Roberto Bez
ist passionierter Webentwickler und begeistert von neuen Technologien, die er versucht, in die tägliche Anwendungsentwicklung einzubringen.
(jul)