javascript / expert
Snippet
Deklarative funktionale Pipelines für State-Übergänge
Funktionale Pipelines ermöglichen es, State-Updates als eine Serie von reinen Transformationen zu komponieren. Dies macht komplexe Logik einfacher zu testen und nachzuvollziehen, indem sie in kleine Funktionen mit einer einzigen Verantwortlichkeit zerlegt wird.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
const pipe = (...fns) => (val) => fns.reduce((acc, fn) => fn(acc), val);const addMetadata = (s) => ({ ...s, updatedAt: Date.now() });const validate = (s) => (s.value < 0 ? { ...s, error: true } : s);const handleUpdate = (newValue) => {const pipeline = pipe((s) => ({ ...s, value: newValue }),validate,addMetadata);setState(pipeline(state));};
react
Erklärung
1
const pipe = (...fns) => (val) => fns.reduce((acc, fn) => fn(acc), val);
Eine Funktion höherer Ordnung, die mehrere Funktionen von links nach rechts miteinander verkettet.
2
validate,
Eine reine Funktion, die die Integrität des States prüft und ein neues State-Objekt zurückgibt.
3
setState(pipeline(state));
Führt die gesamte Logikkette aus und wendet das Endergebnis auf den Komponenten-State an.