javascript / expert
Snippet
Transparenter reaktiver Zustand über rekursive Proxies
Die rekursive Verwendung der Proxy-API ermöglicht die Erstellung tief observierbarer Objekte. Im Gegensatz zu Object.defineProperty fangen Proxies Operationen direkt ab, was Funktionen wie transparente Reaktivität, Validierung oder Logging für verschachtelte Strukturen ermöglicht, ohne jede Eigenschaft manuell instrumentieren zu müssen.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const observer = (target, handler) => {return new Proxy(target, {get(obj, prop) {const val = obj[prop];return (typeof val === 'object' && val !== null) ? observer(val, handler) : val;},set(obj, prop, value) {const success = Reflect.set(obj, prop, value);if (success) handler(prop, value);return success;}});};const state = observer({ user: { name: 'Jonas' } }, (p, v) => console.log(`${p} changed to ${v}`));state.user.name = 'Markus'; // Triggers handler
nextjs
Erklärung
1
return new Proxy(target, { ... });
Hüllt das Zielobjekt in einen Proxy ein, um Operationen wie 'get' und 'set' abzufangen.
2
return (typeof val === 'object' && val !== null) ? observer(val, handler) : val;
Hüllt verschachtelte Objekte beim Zugriff rekursiv in Proxies ein, was tiefes Tracking ermöglicht.
3
const success = Reflect.set(obj, prop, value);
Verwendet Reflect, um die Standard-Zuweisungsoperation sicher auf dem Zielobjekt auszuführen.