2014-11-24 21 views
15

In allen Beispielen und Erklärungen der Flux-Architektur - Facebooks Gegenstück zu React - werden Aktionstypnamen als Enum-Konstanten und nicht als Strings referenziert. (Siehe Beispiele unter http://facebook.github.io/flux/) Ich suche nur nach einer Erklärung, warum dies die bevorzugte Methode ist.Warum verwenden Flux-Architekturbeispiele Konstanten für Aktionstypen anstelle von Strings?

Ich habe keinen Nutzen in Bezug auf Authoring & Bequemlichkeit, weil, ob Sie constants.actionTypes.UPDATE_DATA (Enumeration Konstante) eingeben oder 'UPDATE_DATA' (string), müssen Sie wissen, und geben Sie den genauen Namen. Tatsächlich fügt manchmal die Verwendung von Nicht-Strings Komplexität hinzu - z.B. Sie können ein Objekt nicht so einfach mit Aktionstypen wie Schlüsseln und Aktionshandlern als Werte erstellen.

Sind die Vorteile in Organisation, Minification oder etwas anderes? Ich bin neugierig.

Antwort

20

Sie haben es am Ende Ihrer Frage berührt, aber es gibt ein paar Vorteile. Minimierung ist eine offensichtliche; Ein weiterer Grund ist die Tatsache, dass statische Analysetools leichter Nutzungen finden und Fehler erkennen können.

Je nach Implementierung des Flussmittels können sie auch Tippfehler erkennen. Wenn Sie zum Beispiel in Fluxxor versuchen, einen Store-Handler an den Aktionstyp undefined zu binden, erhalten Sie eine Ausnahme. das bedeutet, dass c.UPDATE_DTA übergeben wird, aber 'UPDATE_DTA' wird nicht übergeben.

Schließlich können sie als Dokumentation dienen. Wenn alle Aktionstypen, die von Ihrer Anwendung generiert werden, zentral als Konstanten definiert sind, wird es einfacher, auf einen Blick zu erkennen, auf welche Arten von Operationen das System als Ganzes reagiert.

Es gibt eine ES6-Funktion, die mit Babel oder Traceur verfügbar ist (aber nicht mit der JSX-Transformation zu diesem Zeitpunkt), die beim Erstellen von Objektliteralen hilft; Die Syntax lautet:

var handlers = { 
    [const.UPDATE_DATA]: this.handleUpdateData, 
    [const.OTHER_THING]: this.handleOtherThing 
}; 
+0

Große Antwort. Danke, Brandon! – fisherwebdev

+0

Das waren genau die Details, die ich suchte. Tolle Erklärung. – davidtheclark

+0

Sie können tatsächlich ziemlich ähnliche Syntax in jeder Javascript-Version erhalten, indem Sie einen Helfer wie diese verwenden http://jsfiddle.net/ny7g09hc/ – Esailija