javascript / intermediate
Snippet
Kapselung von Geschäftslogik im React-State mit unveränderlichen Domain-Entitätsklassen
Die Verwendung von objektorientierten Domain-Value-Objects mit Object.freeze erzwingt Unveränderlichkeit und bündelt Berechnungsregeln. Wenn Klasseninstanzen im React-State gespeichert werden, geben Methoden neue Instanzen zurück, anstatt Eigenschaften direkt zu mutieren, was mit den React-Flachvergleichen harmoniert.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import React, { useState } from 'react';class Money {constructor(cents, currency = 'EUR') {this.cents = Math.round(cents);this.currency = currency;Object.freeze(this);}add(other) {if (this.currency !== other.currency) {throw new Error('Currency mismatch');}return new Money(this.cents + other.cents, this.currency);}format() {return new Intl.NumberFormat('de-DE', {style: 'currency',currency: this.currency}).format(this.cents / 100);}}export function BudgetTracker() {const [total, setTotal] = useState(() => new Money(1000));const handleDeposit = () => {setTotal((prev) => prev.add(new Money(500)));};return (<div><h2>Current Balance: {total.format()}</h2><button onClick={handleDeposit}>Deposit 5,00 €</button></div>);}
react
Erklärung
1
Object.freeze(this);
Friert die neu erzeugte Klasseninstanz ein, um Laufzeitmutationen von Eigenschaften zu unterbinden.
2
return new Money(this.cents + other.cents, this.currency);
Gibt bei der Addition eine neue unveränderliche Instanz zurück und wahrt die Reinheit des React-States.
3
setTotal((prev) => prev.add(new Money(500)));
Aktualisiert den Komponenten-State über die Domain-Methode, die eine frische Objektreferenz liefert.