Einen Staat aufzubauen-management-system mit vanilla-JavaScript

0
35

Die Verwaltung ist nicht eine neue Sache in der software, aber es ist noch relativ neu für Bau-software in JavaScript. Traditionell möchten wir “keep state” in den DOM selbst oder auch zuweisen, Sie zu einem globalen Objekt im Fenster. Jetzt aber, wir sind verwöhnt mit der Auswahl für Bibliotheken und frameworks, die uns helfen, mit diesem. Bibliotheken wie Redux, MobX und Vuex vereinfachen die Verwaltung von cross-component-Zustand, fast trivial. Dies ist ideal für eine Anwendung der Belastbarkeit und es funktioniert wirklich gut mit einer state-first, reactive framework wie Reagieren oder Vue.

Wie wirken sich diese Bibliotheken funktionieren aber? Was würde es dauern, einen zu schreiben selbst? Stellt sich heraus, es ist ziemlich einfach, und es ist eine Gelegenheit, zu lernen, einige wirklich gemeinsame Muster und lernen auch einige nützliche-moderne-APIs, die uns zur Verfügung stehen.

Bevor wir loslegen, ist es empfehlenswert, dass Sie eine vermittelnde Kenntnisse in JavaScript. Sie sollten wissen, über Datentypen und idealerweise sollten Sie haben ein Gespür für etwas mehr moderne ES6+ JavaScript-Funktionen. Wenn nicht, wir haben Ihre Rückseite. Es ist auch erwähnenswert, dass ich sage nicht, dass Sie ersetzen sollte, Redux oder MobX mit diesem. Wir arbeiten an einem kleinen Projekt zum skill-up zusammen und, hey, es könnte auf jeden Fall macht eine kleine Anwendung, wenn Sie ein Auge auf die Größe der JavaScript-payload.

Erste Schritte

Bevor wir Tauchen in code, nehmen Sie einen Blick an, was wir bauen. Es ist eine “done-Liste”, fügt die Dinge, die Sie erreicht haben, heute. Es werde zu aktualisieren, die verschiedenen Elemente der Benutzeroberfläche wie von Zauberhand — ganz ohne framework-Abhängigkeiten. Das ist nicht die wirkliche Magie obwohl. Hinter den kulissen haben wir ein kleines Staatliches system, das sitzen, warten auf Anweisungen und die Aufrechterhaltung einer einzigen Quelle der Wahrheit in einer vorhersagbaren Weise.

Demo Ansehen

Ansicht Repo

Ziemlich cool, Recht? Lassen Sie uns tun einige admin-ersten. Ich habe zusammen ein wenig boilerplate, so können wir halten dieses tutorial bissig. Das erste, was Sie tun müssen, ist entweder Klonen von GitHub, oder laden Sie eine ZIP-Archiv und erweitern Sie es.

Nun, du hast, dass Sie gehen, Sie gehen zu müssen, um zu führen Sie es in einem lokalen web-server. Ich möchte ein Paket mit der Bezeichnung http-server für diese Dinge, aber Sie können verwenden, was Sie wollen. Wann hast du es vor Ort läuft, sollten Sie etwas sehen, das aussieht wie dieses:

Der ursprüngliche Zustand unserer boilerplate.

Die Einrichtung unserer Struktur

Öffnen Sie den root-Ordner in Ihrem bevorzugten text-editor. Dieses mal, für mich, der root Ordner ist:

~/Dokumente/Projekte/vanilla-js-state-management-boilerplate/

Sie sollten sehen, eine Struktur, die ein bisschen aussieht wie diese:

/src
├── .eslintrc
├── .gitignore
├── LICENSE
└── README.md

Pub/Sub

Nächste, öffnen Sie den src-Ordner und öffnen Sie dann die Ordner js, lebt dort. Machen Sie einen neuen Ordner namens lib. Im inneren, stellen Sie eine neue Datei namens pubsub.js.

Die Struktur von deinem js-Verzeichnis sollte wie folgt Aussehen:

/js
├── lib
└── pubsub.js

Öffnen pubsub.js da wir noch einen kleinen Pub/Sub-Muster, kurz für “Publish/Subscribe.” Wir erstellen Ihnen die Funktionalität, die ermöglicht, dass Teile unserer Anwendung zu abonnieren benannte Ereignisse. Ein anderer Teil der Anwendung können dann veröffentlichen Sie diese Ereignisse, die oft mit einer Art von relevanten Nutzlast.

Pub/Sub ist manchmal schwer zu begreifen, so wie über eine Analogie? Stellen Sie sich vor Sie arbeiten in einem restaurant, und Ihre Kunden haben eine vorspeise und ein Hauptgericht. Wenn Sie jemals gearbeitet in der Küche, werden Sie wissen, dass, wenn der server löscht die Vorspeisen, Sie lassen die Köche wissen, welche Tabelle starter sind gelöscht. Dies ist ein cue zu Beginn auf die wichtigsten Kurse für die Tabelle. In einer großen Küche, gibt es ein paar Köche, die wahrscheinlich auf unterschiedliche Gerichte. Sie sind alle abonniert, um die cue aus, dass der server den Kunden abgeschlossen haben Ihre Vorspeisen, so dass Sie wissen, dass Sie tun Ihre Funktion, die bereiten Sie das Hauptgericht. Also, du hast mehrere Köche warten auf der gleichen cue (benannt Ereignis) zu tun, die verschiedene Funktionen (callback).

Hoffentlich denken Sie es sich wie, dass es hilft Sinn machen. Let ‘ s move on!

Die PubSub-Muster durchläuft Sie alle Abonnements und feuert Ihre Rückrufe mit, dass die Nutzlast. Es ist eine großartige Möglichkeit zu schaffen, eine ziemlich elegante reaktiven Strömung für Ihre app und wir können es mit nur ein paar Zeilen code.

Fügen Sie die folgenden pubsub.js:

export-Standard-Klasse PubSub {
Konstruktor() {
diese.events = {};
}
}

Was wir haben es ist eine frische neue Klasse und wir setzen diese.Ereignisse wie ein leeres Objekt standardmäßig. Die diesem.Event-Objekt wird an unsere benannte Ereignisse.

Nachdem der Konstruktor der schließenden Klammer, Folgendes hinzufügen:

subscribe(event, callback) {

lassen self = this;

if(!selbst.Veranstaltungen.hasOwnProperty(event)) {
selbst.Ereignisse[Ereignis] = [];
}

return self.Ereignisse[Ereignis].push(callback);
}

Dies ist unser subscribe-Methode. Übergeben Sie eine Zeichenfolge Ereignis, welches das Ereignis eindeutigen Namen und eine Rückruf-Funktion. Wenn es nicht bereits ein passendes Ereignis in unserer events-Sammlung, schaffen wir es mit einem leeren array, so dass wir nicht haben, um geben Sie überprüfen es später. Dann, drücken wir die callback-in dieser Sammlung. Wenn es das schon gibt, ist diese Methode tun würde. Kehren wir die Länge der Veranstaltungen, Sammlung, denn es könnte nützlich sein, für jemanden, um zu wissen, wie viele events vorhanden sind.

Nun, wir haben eine subscribe-Methode, erraten, was als Nächstes kommt? Sie wissen es: die Methode “publish”. Fügen Sie den folgenden nach Ihrer subscribe-Methode:

publish(event, data = {}) {

lassen self = this;

if(!selbst.Veranstaltungen.hasOwnProperty(event)) {
return [];
}

return self.Ereignisse[Ereignis].map(callback => callback(data));
}

Diese Methode überprüft zuerst, ob das übergebene Ereignis existiert in unserer Sammlung. Wenn nicht, kehren wir ein leeres array. Keine Dramen. Wenn es eine Veranstaltung gibt, die wir Durchlaufen, um alle gespeicherten Rückruf und übergeben Sie die Daten in es. Wenn es gibt keine Rückrufe (was auch nicht immer der Fall sein), es ist alles gut, weil wir geschaffen, das Ereignis mit einem leeren array in der subscribe-Methode.

Dass es für PubSub. Lassen Sie uns nun auf den nächsten Teil!!!!

Das core-Objekt zu Speichern

Nun, wir haben unseren Pub/Sub-Modul,, wir haben unsere einzige Abhängigkeit für die Fleisch – ‘ N ‘ ‘taters dieser kleinen Anwendung: die Store. Wir ‘ ll go ahead und starten Sie entfleischen, dass jetzt.

Lassen Sie uns zuerst beschreiben, was diese tut.

Der Store ist unser zentrales Objekt. Jedes mal, wenn Sie sehen, @import store ‘../lib/store.js werden Sie ziehen in das Objekt, das wir schreiben. Es werde enthalten ein state-Objekt enthält wiederum unser Zustand der Anwendung eine commit-Methode aufrufen, werden unsere >Mutationenund schließlich eine dispatch-Funktion aufrufen, werden unsere Aktionen. Unter dies und das core-Objekt zu Speichern, es wird eine Proxy-basierte system, das monitor-und broadcast-Status-änderungen mit unserem PubSub Moduls.

Beginnen Sie, indem Sie erstellen ein neues Verzeichnis in deinem js-Verzeichnis zu speichern. Dort erstellen Sie eine neue Datei namens store.js. Ihre js-Verzeichnis sollte nun wie folgt Aussehen:

/js
└── lib
└── pubsub.js
└──store
└── store.js

Öffnen store.js und importieren unsere Pub/Sub-Modul. Um das zu tun, fügen Sie den folgenden direkt an den Anfang der Datei:

import PubSub von ‘../lib/pubsub.js’;

Für diejenigen, die Arbeit mit ES6 regelmäßig, dies wird sehr erkennbar. Laufen diese Art von code ohne bundler wird wahrscheinlich weniger erkennbar wenn. Es ist ein heck einer Menge von bereits Unterstützung für diesen Ansatz, auch!

Als Nächstes beginnen wir bauen unser Objekt. Direkt nach dem importieren, fügen Sie die folgenden store.js:

export-Standard-class Store {
Konstruktor(params) {
lassen self = this;
}
}

Dies ist alles ziemlich selbsterklärend, also fügen wir das nächste bit. Wir werden hinzufügen, default-Objekte für den Staat, Aktionen und Mutationen. Wir sind auch das hinzufügen einer status-element, das wir verwenden, um zu bestimmen, was das Objekt zu einem bestimmten Zeitpunkt. Dies geht direkt nach lassen self = this;:

selbst.actions = {};
selbst.Mutationen = {};
selbst.state = {};
selbst.status = “ruht”;

Direkt im Anschluss erstellen wir eine neue PubSub-Instanz angehängt werden die Shop events element:

selbst.events = new PubSub();

Als Nächstes gehen wir auf die Suche der übergebenen params-Objekt zu sehen, ob irgendwelche Aktionen oder Mutationen übergeben wurden. Wenn der Store-Objekt instanziiert wird, dann können wir auch in ein Objekt der Daten. Enthalten, können eine Sammlung von Aktionen und Mutationen, die Steuerung des Datenflusses in unserem Shop. Der folgende code kommt gleich rechts nach der letzten Zeile, die Sie Hinzugefügt:

if(params.hasOwnProperty(‘Aktionen’)) {
selbst.Aktionen = params.Aktionen;
}

if(params.hasOwnProperty(‘Mutationen’)) {
selbst.Mutationen = params.Mutationen;
}

Das ist unser aller Standardwerte gesetzt und fast alle unsere potenziellen params gesetzt. Lassen Sie uns nehmen einen Blick an, wie unsere Store-Objekt protokolliert alle änderungen. Wir gehen über einen Proxy zu benutzen, dies zu tun. Was der Proxy tut, ist im wesentlichen im Auftrag unserer state-Objekt. Wenn wir noch eine bekommen trap, wir können überwachen jede Zeit, die das Objekt für Daten gefragt. Ähnlich ist es mit einem Satz Falle, dann können wir ein Auge auf die änderungen, die vorgenommen werden, um das Objekt. Dies ist der wichtigste Teil, der uns interessiert heute. Fügen Sie den folgenden direkt nach der letzten Linien, die Sie Hinzugefügt haben, und wir werden diskutieren, was es tut:

selbst.state = new Proxy((params.Zustand || {}), {
set: function(state, key, value) {

Zustand[Schlüssel] = Wert;

console.log(`stateChange: ${key}: ${value}`);

selbst.Veranstaltungen.publish(‘stateChange’, self.Staat);

wenn(selbst.status !== ‘mutation’) {
console.warnen(`sollten Sie eine mutation zu ${key}`);
}

selbst.status = “ruht”;

return true;
}
});

Was hier passiert, ist, dass wir überfüllen die Status-Objekt set-Operationen. Das bedeutet, dass, wenn eine mutation läuft so etwas wie Staat.name = ‘Foo’ , diese Falle fängt, bevor es eingestellt werden kann, und bietet uns die Gelegenheit, gemeinsam mit dem ändern oder auch verwerfen es komplett. In unserem Kontext sind wir allerdings die Einstellung ändern und dann anmelden auf der Konsole. Wir sind dann die Veröffentlichung eines stateChange-Ereignis mit unseren PubSub Moduls. Alles abonniert, Ereignis-callback aufgerufen wird. Schließlich, wir prüfen den status von Store. Wenn es nicht derzeit eine mutation ist, bedeutet es wahrscheinlich, dass der Status wurde manuell aktualisiert. Wir fügen eine kleine Warnung in der Konsole für die zu geben die Entwickler ein wenig geschimpft.

Es gibt eine Menge dort Los, aber ich hoffe, du bist beginnen zu sehen, wie dies alles zusammen kommt und vor allem, wie sind wir in der Lage, um den Status beizubehalten, zentral, Dank Proxy-und Pub/Sub.

Versand-und commit

Jetzt haben wir unsere Kern-Elemente des Ladens, fügen wir zwei Methoden. Eine aufrufen, werden unsere Handlungen mit Namen Versand und ein weiterer, rufen Sie unser Mutationen genannt, Begehen. Beginnen wir mit dem Versand durch das hinzufügen dieser Methode nach Ihrem Konstruktor in store.js:

Versand(actionKey, payload) {

lassen self = this;

if(typeof self.Aktionen[actionKey] !== ‘function’) {
console.error(`Action “${actionKey} existiert nicht.`);
return false;
}

console.groupCollapsed (“ACTION: ${actionKey}`);

selbst.status = ‘Aktion’;

selbst.Aktionen[actionKey](self, payload);

console.groupEnd();

return true;
}

Der Prozess hier ist: suchen Sie sich eine Aktion, und wenn es vorhanden ist, einen status festzulegen, und rufen Sie die Aktion während der Erstellung einer logging-Gruppe, hält alle unsere Protokolle nett und ordentlich. Alles, was angemeldet ist (wie eine mutation-oder Proxy-log) aufbewahrt werden, in der Gruppe, die wir definieren. Wenn keine Aktion festgelegt ist, wird es einen Fehler melden und Abbrechen. Das war ziemlich einfach, und die commit-Methode ist sogar noch einfacher.

Fügen Sie diese nach Ihrem Versand-Methode:

commit(mutationKey, payload) {
lassen self = this;

if(typeof self.Mutationen[mutationKey] !== ‘function’) {
console.log(`Mutation “${mutationKey}” existiert nicht`);
return false;
}

selbst.status = ‘mutation’;

let newState = selbst.Mutationen[mutationKey](selbst.Staat, payload);

selbst.Zustand = Objekt.ordnen Sie(selbst.Staat, newState);

return true;
}

Diese Methode ist ziemlich ähnlich, aber wir führen Sie durch den Prozess sowieso. Wenn die mutation gefunden werden kann, laufen wir und unsere neue Staat von seinem Rückgabewert. Dann nehmen wir diesem neuen Staat, und führen Sie Sie mit unseren bestehenden Staat zu schaffen, eine up-to-date-version von unserem Staat.

Mit diesen Methoden Hinzugefügt, unsere Store-Objekt ist so ziemlich abgeschlossen. Sie könnte tatsächlich modular-ize, diese Anwendung jetzt, wenn Sie wollten, da haben wir die meisten der bits, die wir brauchen. Man könnte auch hinzufügen, einige tests, um zu überprüfen, ob alles wie erwartet ausgeführt. Aber ich werde nicht verlassen Sie hängen wie die. Machen wir es alle tatsächlich tun, was wir uns vorgenommen haben und weiter mit unserer kleinen app!

Erstellen einer Basis-Komponente

Die Kommunikation mit unseren Shop-wir haben drei Hauptbereiche, die update-unabhängig, basierend auf dem, was in ihm gespeichert sind. Wir machen eine Liste der eingereichten Objekte, eine visuelle Zählung dieser Elemente, und ein anderes, dass ist optisch versteckt, mit genaueren Informationen für screen-Reader. Diese alle verschiedene Dinge tun, aber Sie alle profitieren von etwas gemeinsamen Kontrolle über Ihre lokalen Staat. Wir machen eine Basis-Komponente-Klasse!

Als erstes erstellen wir eine Datei. Im lib-Verzeichnis, gehen Sie vor und erstellen Sie eine Datei namens component.js. Der Pfad bei mir ist:

~/Documents/Projects/vanilla-js-state-management-boilerplate/src/js/lib/component.js

Sobald diese Datei erstellt ist, öffnen Sie es und fügen Sie die folgenden:

import Store ‘../store/store.js’;

export-Standard-class Komponente {
Konstruktor(Requisiten = {}) {
lassen self = this;

diese.render =.render || function() {};

wenn(props.store ein Store) {
Requisiten.store.Veranstaltungen.subscribe(‘stateChange’, () => selbst.render());
}

wenn(props.hasOwnProperty(‘element’)) {
diese.element = props.element;
}
}
}

Reden wir über dieses Stück code. First up, wir importieren den laden Klasse. Dies ist nicht, weil wir wollen, dass eine Instanz, aber mehr für die Prüfung eines unserer Objekte im Konstruktor. Apropos, im Konstruktor, die wir suchen, um zu sehen, wenn wir haben eine render-Methode. Wenn diese Component-Klasse ist das übergeordnete Element einer anderen Klasse ist, dann haben Sie wahrscheinlich Ihre eigene Methode zum Rendern. Wenn dort keine Methode festgelegt ist, erstellen wir eine leere Methode, die verhindert, dass Dinge aus brechen.

Nachdem wir den check gegen den laden Klasse, wie ich oben erwähnt habe. Wir tun dies, um sicherzustellen, dass der prop store ist ein Store-Klasse-Instanz, so können wir getrost mit dessen Methoden und Eigenschaften. Apropos, wir abonnieren die Globale stateChange-Ereignis, damit unser Objekt reagieren kann. Dies ist der Aufruf der render-Funktion jedes mal, wenn der Zustand sich ändert.

Das ist alles, was wir brauchen, um zu schreiben für diese Klasse. Es wird als eine übergeordnete Klasse, die anderen Komponenten-Klassen ausgedehnt werden. Let ‘ s crack mit denen!

Die Erstellung unserer Komponenten

Wie ich schon sagte, wir haben drei Komponenten zu machen und Ihr alle geht zum erweitern der Basis-Komponente-Klasse. Beginnen wir mit dem größten an: die Liste der Elemente!

In deinem js-Verzeichnis, erstellen Sie einen neuen Ordner namens components und dort erstellen Sie eine neue Datei namens list.js. Bei mir ist der Pfad:

~/Documents/Projects/vanilla-js-state-management-boilerplate/src/js/component/list.js

Öffnen Sie diese Datei und fügen Sie das ganze Stück code in es:

import-Komponente von ‘../lib/component.js’;
import store ‘../store/index.js’;

export Standard class List extends Component {

Konstruktor() {
super({
store,
element: Dokument.querySelector(‘.js-Elemente’)
});
}

render() {
lassen self = this;

if(store.Zustand.Elemente.length === 0) {
selbst.element.innerHTML = `<p class=”no-items”>Sie haben noch gar nichts getan &#x1f622;</p>`;
return;
}

selbst.element.innerHTML = `
<ul class=”app – __ – items”>
${store.Zustand.Elemente.Karte(item => {
return `
<li>${item}<button aria-label=”Eintrag Löschen”>×</button></li>
`
}).join(“)}
</ul>
`;

selbst.element.querySelectorAll(‘button’).forEach ((- Taste, index) => {
– Taste.addEventListener(‘click’, () => {
store.dispatch(‘clearItem’, { index });
});
});
}
};

Ich hoffe, der code ist ziemlich selbsterklärend, nach dem, was wir gelernt haben, weiter oben in diesem tutorial, aber wir überfliegen es trotzdem. Wir starten durch übergabe unserer Shop-Instanz bis zu der Komponente übergeordneten Klasse, dass wir erweitern. Dies ist die Component-Klasse, die wir gerade geschrieben haben.

Danach erklären wir unsere render-Methode aufgerufen wird, jedes mal, wenn die stateChange Pub/Sub-Ereignis passiert. In diesem render-Methode haben wir eine Liste von items oder ein wenig bemerken, wenn es keine Elemente. Sie werden auch bemerken, dass jede Taste hat ein Ereignis angehängt werden und Sie Versand-und Aktion in unserem Shop. Diese Aktion existiert noch nicht, aber wir bekommen es bald.

Als Nächstes erstellen Sie zwei weitere Dateien. Diese sind zwei neue Komponenten, aber Sie sind winzig — also wir sind nur zu fügen Sie einige code, der in Ihnen ist, und bewegen auf.

Erstellen Sie zunächst count.js in Ihre Komponenten-Verzeichnis und fügen Sie den folgenden:

import-Komponente von ‘../lib/component.js’;
import store ‘../store/index.js’;

export-Standard-Klasse Zählen extends Component {
Konstruktor() {
super({
store,
element: Dokument.querySelector(‘.js-count’)
});
}

render() {
lassen suffix = store.Zustand.Elemente.length !== 1 ? ‘s’ : “;
lassen Sie emoji = store.Zustand.Elemente.Länge > 0 ? ‘&#x1f64c;’ : ‘&#x1f622;’;

diese.element.innerHTML = `
<small>Du hast getan,</small>
${store.Zustand.Elemente.Länge}
<small>was${suffix} heute ${emoji}</small>
`;
}
}

Sieht ziemlich ähnlich wie die Liste, nicht wahr? Hier gibt ‘ s nichts, dass wir nicht schon abgedeckt, also fügen wir eine weitere Datei. Im gleichen Komponenten Verzeichnis hinzufügen status.js Datei und fügen Sie die folgenden:

import-Komponente von ‘../lib/component.js’;
import store ‘../store/index.js’;

export-Standard-Klasse-Status extends Component {
Konstruktor() {
super({
store,
element: Dokument.querySelector(‘.js-status’)
});
}

render() {
lassen self = this;
lassen suffix = store.Zustand.Elemente.length !== 1 ? ‘s’ : “;

selbst.element.innerHTML = `${store.Zustand.Elemente.Länge} item${suffix}`;
}
}

Wieder, wir haben alles abgedeckt, aber Sie können sehen, wie praktisch es ist, mit einer base-Komponente, mit zu arbeiten, richtig? Das ist einer der vielen Vorteile der Objekt-orientierten Programmierung ist, was dieses tutorial basiert auf.

Schließlich wollen wir prüfen, dass Ihre js-Verzeichnis ist auf der Suche rechts. Dies ist die Struktur, wo wir derzeit an:

/src
├── js
│ ├── components
│ │ ├── count.js
│ │ ├── list.js
│ │ └── status.js
│ ├──lib
│ │ ├──component.js
│ │ └──pubsub.js
└───── store
└──store.js
└──main.js

Let ‘ s wire es

Nun, wir haben unsere front-end-Komponenten und unser Hauptgeschäft, alles, was wir zu tun haben, ist alles verkabeln.

Wir haben unser Shop-system und die Komponenten für die Darstellung und die Interaktion mit seinen Daten. Nun zu den wrap-up durch Einhaken die beiden getrennten enden der app und machen die ganze Sache zusammen zu arbeiten. Wir müssen hinzufügen, ein Erster Zustand, einige Maßnahmen und einige Mutationen. In Ihr store-Verzeichnis, fügen Sie eine neue Datei namens state.js. Für mich ist es wie dieses:

~/Documents/Projects/vanilla-js-state-management-boilerplate/src/js/store/state.js

Öffnen Sie diese Datei und fügen Sie die folgenden:

export default {
Elemente: [
‘Ich dies’,
“Ein anderes Ding”
]
};

Das ist ziemlich selbsterklärend. Wir sind das hinzufügen einer Reihe von Standard-Elemente, so dass auf den ersten laden, unsere kleine app wird vollständig interaktiv. Lassen Sie uns nun auf einige Aktionen. In Ihr store-Verzeichnis, erstellen Sie eine neue Datei namens actions.js und fügen Folgendes hinzu:

export default {
addItem(Kontext -, payload) {
Kontext.commit(‘addItem’, payload);
},
clearItem(Kontext -, payload) {
Kontext.commit(‘clearItem’, payload);
}
};

Die Aktionen in dieser app sind ziemlich minimal. Im wesentlichen, jede Aktion ist vorbei, eine Nutzlast auf eine mutation, die wiederum verpflichtet die Daten zu speichern. Der Kontext ist, wie wir früher gelernt haben, ist die Instanz der Shop Klasse und die payload übergeben, was auch immer löst die Aktion aus. Apropos Mutationen, fügen wir einige. In diesem selben Verzeichnis fügen Sie eine neue Datei namens mutations.js. Öffnen Sie es und fügen Sie die folgenden:

export default {
addItem(Staat, payload) {
Zustand.Elemente.push(payload);

return Zustand;
},
clearItem(Staat, payload) {
Zustand.Elemente.splice(Nutzlast.index, 1);

return Zustand;
}
};

Wie die Aktionen, die diese Mutationen sind minimal. Meiner Meinung nach, Ihre Mutationen sollte immer einfach sein, denn Sie haben einen job: Sie mutieren der Filiale Stand. Als Ergebnis, diese Beispiele sind so Komplex, wie Sie immer sollte. Jede richtige Logik passieren sollte, in Ihren Handlungen. Wie Sie sehen können, dieses system, wir liefern Ihnen die neue version des Staates, so dass der Speicher`s <code>commit-Methode tun kann, seine Magie und alles aktualisieren. Mit die wichtigsten Elemente in das Shop-system sind vorhanden. Lassen Sie kleben Sie zusammen mit einer index-Datei.

Im gleichen Verzeichnis erstellen Sie eine neue Datei namens index.js. Öffnen Sie es und fügen Sie die folgenden:

import-Aktionen von ‘./actions.js’;
import Mutationen von ‘./mutations.js’;
import-Status von ‘./state.js’;
importieren, Speichern von ‘./store.js’;

export Standard neu Speichern({
Aktionen,
Mutationen,
Zustand
});

Alle diese Datei macht, ist das importieren alle unsere store-Stücke und kleben Sie alle zusammen als eine prägnante Shop-Instanz. Fertig!

Das Letzte Stück des Puzzles

Das Letzte, was wir brauchen, um gemeinsam die main.js Datei, die wir in unserem index.html Seite viiiiel bis zu Beginn dieses Tutorials. Sobald wir diese sortiert haben, werden wir in der Lage, um Feuer-up-Browser und genießen Sie unsere harte Arbeit! Erstellen Sie eine neue Datei namens main.js an der Wurzel Ihres js-Verzeichnis. Dies ist, wie es für mich ausschaut:

~/Documents/Projects/vanilla-js-state-management-boilerplate/src/js/main.js

Öffnen Sie es und fügen Sie die folgenden:

importieren, speichern von ‘./store/index.js’;

import Anzahl aus ‘./components/count.js’;
Liste importieren von ‘./components/list.js’;
import-Status von ‘./components/status.js’;

const formElement = document.querySelector(‘.js-form’);
const inputElement = document.querySelector(‘#new-item-Feld’);

So weit, alles, was wir tun, ist ziehen in Abhängigkeiten, die wir brauchen. Wir haben unseren Store, unsere front-end-Komponenten und ein paar DOM-Elemente, mit zu arbeiten. Fügen wir diese nächste bit, um die form der interaktiven, direkt unter diesem code:

formElement.addEventListener(‘submit’, evt => {
evt.preventDefault();

let Wert = inputElement.Wert.trim();

if(Wert.Länge) {
store.dispatch(‘addItem’, Wert);
inputElement.value = “;
inputElement.focus();
}
});

Was wir hier tun, fügt ein Ereignis-listener, um die form und verhindern, dass es vom Einreichen. Wir nehmen dann den Wert aus der textbox und trim alle Leerzeichen aus. Wir tun das, weil wir prüfen wollen, ob es tatsächlich irgendwelche Inhalte zu passieren, um den laden weiter. Endlich, wenn der content, den wir versenden unsere addItem Aktion mit, dass die Inhalte und lassen Sie sich von unseren glänzenden neuen store deal mit ihm für uns.

Fügen wir also etwas mehr code main.js. Unter der Ereignis-listener hinzufügen das folgende:

const countInstance = new Count();
const listInstance = new Liste();
const statusInstance = new Status();

countInstance.render();
listInstance.render();
statusInstance.render();

Alles, was wir hier tun, ist das erstellen neuer Instanzen von Komponenten und ruft jede Ihrer render-Methoden, so dass wir unseren ersten Stand auf der Seite.

Mit diesem Zusatz final, wir sind fertig!

Öffnen Sie Ihren browser, aktualisieren und schwelgen Sie in der Herrlichkeit Ihres neuen Staat verwaltete app. Gehen Sie voran und fügen Sie so etwas wie “Ende dieses awesome tutorial”. Recht ordentlich, nicht wahr?

Die nächsten Schritte

Es gibt eine Menge Dinge, die Sie tun könnten, mit diesem kleinen system, das wir zusammengestellt haben. Hier sind einige Ideen für die weiter auf eigene Faust:

  • Sie konnte mit der Umsetzung einiger lokaler Speicher Zustand zu halten, selbst wenn Sie neu laden
  • Sie konnte pull-out die front-end von diesem und ein wenig Staatliche system für Ihre Projekte
  • Sie konnte weiter zu entwickeln, das front-end dieser app und machen Sie es sehen Super aus. (Ich wäre wirklich daran interessiert zu sehen, Ihre Arbeit, also bitte teilen!)
  • Sie könnten arbeiten mit remote-Daten und vielleicht sogar eine API
  • Sie konnte sich nehmen, was Sie gelernt haben, über Proxy-und Pub/Sub-Muster und entwickeln diese übertragbare Fähigkeiten weiter

Zusammenfassung

Danke für das lernen, wie diese Systeme funktionieren bei mir. Der große, beliebte sind viel komplexer und intelligenter, dass das, was wir gemacht haben — aber es ist immer noch nützlich, um eine Vorstellung zu bekommen, wie diese Systeme arbeiten und entwirren das Geheimnis hinter Ihnen. Es ist auch nützlich zu lernen, wie mächtig JavaScript kann ohne frameworks zu löschen.

Wenn Sie möchten, eine fertige version von diesem kleinen system, Lesen Sie in diesem GitHub-repository. Sie können auch eine demo sehen Sie hier.

Wenn Sie entwickeln diese weiter, würde ich Liebe es zu sehen, so hit me up auf oder postet in den Kommentaren unten, wenn Sie tun!