State Management in Svelte

Teil der Webentwicklung in 2020 sind nicht nur komponentenbasierte Ansätze, sondern ebenso die Nutzung von State-Management-Lösungen. Diese orientieren sich in der Regel an der Flux-Architektur und ihrem prominentesten Vertreter, Redux . Und so ist es nicht verwunderlich, dass auch Svelte hier eine passende Lösung mitbringt, welche ich im folgenden Artikel vorstelle. Der hier gezeigte Code stammt aus dem offiziellen Tutorial .

Interessierst du dich zunächst für die Grundlagen von Svelte? Dann schau dir meine Einführung zu Svelte an .

Erste Schritte

Svelte bringt, wie erwähnt, seine Store-Implementierung gleich mit. Um beispielsweise einen Store zu implementieren, der den State eines Counters verwaltet, brauchen wir lediglich zwei Zeilen Code:

1import { writable } from 'svelte/store';
2 
3export const count = writable(0);

Wir implementieren den Store als writeable (wir kommen später noch zum read-only pendant) und erstellen einen Store mit dem initialen State (hier 0). Die hier exportierte Variable count bietet drei Methoden:

• subscribe(callback): Wird ausgeführt, wenn der Store aktualisiert wird. Die callback-Funktion bekommt als Parameter den initialen Wert im Store übergeben.
• update(callback): Führt den callback aus. Die callback-Funktion bekommt als Parameter den initialen Wert im Store übergeben.
• set(value): Setzt den Wert im Store auf den übergebenen Wert value.

In einer Svelte-Komponente könnte ein Counter folgendermaßen aussehen:

1<script>
2 import { count } from "./store";
3 
4 let count_value;
5 function increment() {
6   count.update(n => n + 1);
7 }
8 function decrement() {
9   count.update(n => n - 1);
10 }
11 function reset() {
12   count.set(0);
13 }
14count.subscribe(value => {
15   count_value = value;
16 });
17</script>
18<h1>The count is {count_value}</h1>
19<button> + </button> <button> - </button> <button> Reset </button>

Man kann sich die Nutzung der subscribe-Funktion hier noch sparen, indem man die Kurzform $count nutzt:

1<script>
2 import { count } from "./store";
3 
4 function increment() {
5   count.update(n => n + 1);
6 }
7 function decrement() {
8   count.update(n => n - 1);
9 }
10 function reset() {
11   count.set(0);
12 }
13</script>
14<h1>The count is {$count}</h1>
15<button> + </button> <button> - </button> <button> Reset </button>

Das $-Zeichen ist in Svelte ein reserviertes Zeichen, welches sich immer auf einen Store beziehen muss. Es ist also nicht erlaubt, dieses für eigene Variablen zu nutzen.

Custom Stores

Nun möchte man nicht immer innerhalb einer Komponente direkt mit dem Store interagieren. In Redux gibt es hierfür Reducer und Actions, mit denen man Änderungen am State auslösen kann. In Svelte können wir einen custom store anlegen, für den wir eigene Operationen definieren können. Der Vorteil hier ist, dass man weniger Boilerplate Code benötigt, um die State zu manipulieren.

1import { writable } from "svelte/store";
2 
3function createCount() {
4 const { subscribe, set, update } = writable(0);
5 
6 return {
7   subscribe,
8   increment: () => update(n => n + 1),
9   decrement: () => update(n => n - 1),
10   reset: () => set(0)
11 };
12}
13 
14export const count = createCount();

In der Komponente sparen wir uns so einiges an Code und machen alles etwas übersichtlicher:

1<script>
2 import { count } from "./store";
3</script>
4<h1>The count is {$count}</h1>
5<button> + </button> <button> - </button> <button> Reset </button>

Readable und Derived Store

Neben dem writeable store bietet Svelte zwei weitere spannende Möglichkeiten: den readable store und den derived store.

Der readable store ist, wie der Name schon sagt, ein read-only Store. Dieser kann genutzt werden, wenn die im Store verwalteten Daten nicht vom Nutzer manipuliert werden sollen.

Der derived store erlaubt es, Daten abhängig von anderen Stores zu verwalten. So lässt sich Komplexität in einzelnen Stores vermeiden, indem man diese in derived stores auslagert.

Fazit

Auch beim Thema State Management erfindet Svelte das Rad nicht neu: Die Idee, State Management über Stores zu realisieren kennen wir schon von React, Angular und Vue. Dennoch ist die von Svelte etablierte Lösung interessant: read-only und derived stores lösen bekannte Probleme in Frontend-Anwendungen. Die Möglichkeit Custom Stores zu erstellen spart einerseits sehr viel Boilerplate Code (der ja auch bei anderen durch Bibliotheken ersetzt wird ) und erlaubt es zudem, die einzelnen Stores mit domänenspezifischer Logik zu implementieren.

Foto von Mike Petrucci