javascript / expert
Snippet
Tief verschachtelte Reaktivität mittels Proxy-wrapped State
Während Sveltes eingebaute Reaktivität mächtig ist, kann der Umgang mit tief verschachtelten Objekten zu wortreichen Update-Mustern führen. Durch das Einpacken des States in einen rekursiven ES6-Proxy können wir Mutationen in jeder Tiefe abfangen und automatisch Store-Updates auslösen, was eine 'mutierbare' Entwicklungserfahrung nachahmt, ohne die Reaktivität zu verlieren.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { writable } from 'svelte/store';function deepProxy(obj, callback) {return new Proxy(obj, {get(target, prop) {const val = target[prop];return (typeof val === 'object' && val !== null) ? deepProxy(val, callback) : val;},set(target, prop, val) {target[prop] = val;callback();return true;}});}export function reactiveObject(initial) {const store = writable(initial);const proxy = deepProxy(initial, () => store.set(initial));return { subscribe: store.subscribe, proxy };}
svelte
Erklärung
1
get(target, prop) { ... rekursiv ... }
Wickelt verschachtelte Objekte rekursiv in Proxies ein, um tiefgreifendes Abfangen zu gewährleisten.
2
callback();
Löst das Svelte-Store-Update aus, wann immer eine Eigenschaft irgendwo im Objektbaum gesetzt wird.