Fun State Management Huex Framework

Einführung

Ich war immer wieder erstaunt, wie viele Aktionen Sie für die Zustandsverwaltung von Frameworks ausführen müssen - beschreiben Sie sofort das Schema, schreiben Sie Mutationen, legen Sie sie fest ... Warum nicht alles so einfach wie möglich machen?)

Warum Code schreiben, wenn Sie ihn nicht schreiben können?

(aktualisiert)
Ich präsentiere Ihnen mein halbstündiges Handwerk - Huex !

Bisher ist die Lösung nur auf der NodeJS-Plattform verfügbar, aber ich denke, sie wird für die Präsentation ausreichen.

Haftungsausschluss: Huex wurde von mir nur zu Unterhaltungs- und Bildungszwecken geschrieben und erhebt keinen Anspruch auf ein vollwertiges Framework. Und vielleicht behauptet es. Jetzt lass uns gehen.

Wofür ist es?

Haben Sie ein einziges praktisches Data Warehouse. In der Lage sein, ihre Änderungen zu überwachen. Er wird unverständliche Wörter wie "Getter", "Mutatoren", "Aktionen", "Commit" usw. los.

Wie installiere ich es?

Bisher nur durch Kopieren dieses Repositorys.
Nachdem das Repository kopiert wurde, müssen Sie es über package.json Ihres Projekts irgendwo in dieser Form verbinden:

"dependencies": { "huex": "file:../huex/" } 

Danach wird es als Huex-Modul verfügbar sein.

Oder machen Sie es noch einfacher, wie dpr richtig bemerkt hat:
npm i -S https://github.com/vssenko/huex.git

Wie benutzt man es?

So natürlich und einfach wie möglich. Beginnen wir gleich mit dem Code:

 //  huex. const Huex = require('huex'); //  . const storage = Huex(); //     - . storage.on('change:a', (e) => console.log(`Property "a" was changed: ${e.value}`)); //      . storage.a = 5; 

Und das ist alles. Bei jeder Änderung \ Einstellung des Feldes unseres Speichers werden zwei Ereignisse erstellt: Änderung mit Daten {Schlüssel, Wert} und Änderung: Schlüssel mit Daten {Wert}.
(aktualisiert)
Bei verschachtelten Objekten und Arrays werden Ereignisse sowohl für das verschachtelte Objekt als auch für das übergeordnete Objekt erstellt.
Genug, um Projekte beliebiger Komplexität zu erstellen.

Vielleicht noch etwas?

Natürlich: Sie können direkt unterwegs tief verschachtelte Felder erstellen, und es werden keine Ausnahmen erstellt.

 const Huex = require('huex'); const storage = Huex(); storage.abcde = 5; 

Natürlich können Event-Handler auch an alle verschachtelten Objekte gehängt werden.

(aktualisiert)

Vielleicht noch etwas?

Ja! Jetzt arbeitet Huex nicht nur mit einfachen Daten, sondern auch mit Objekten und Arrays und wandelt sie unterwegs in Huex-Repositorys um!

  sut.subSut = { a: 5 }; sut.on('change:subSut', (e) => { console.log(e.key); // subSut console.log(e.value.a) // 10 console.log(e.nested); // { key: 'a', value: 10 } }); sut.subSut.a = 10; 

Noch mehr Beispiele sind in Projekttests verfügbar.

Was ist der Haken?

All diese Magie wird durch Proxy implementiert. Dies ist nicht die schnellste Lösung, und im Allgemeinen wird die Verwendung der Proxy-Klasse in der Produktion nicht empfohlen.

(Update)

Fazit

Für zwei Entwicklungszyklen (Abende) hat die JS-Community einen weiteren interessanten Rahmen.
Was Huex kann:

• Initialisiert von object \ array
• Speichern Sie Werte durch einfache Zuordnung
• Löst Ereignisse aus, wenn Sie sich selbst als Objekt oder als Array ändern
• Wiederholen Sie unterwegs die in Huex-Repositorys darauf geschriebenen Objekte / Arrays
• Löst Ereignisse aus, wenn Sie ein Objektfeld oder ein Arrayfeld ändern
• Generieren Sie unterwegs leere Speicher, wenn Sie auf ein nicht vorhandenes Feld zugreifen (eine kontroverse Funktion, aber sehr cool).

Was Huex nicht kann:

• Sei schnell :-). Obwohl, wie Drag13 feststellte, immer noch Fortschritte in Richtung der Geschwindigkeit von Proxy erzielt werden , wird dieser Ansatz plötzlich populär.