javascript / expert
Snippet
Algebraische Effekte mit Suspense Resource
Dieses Muster simuliert algebraische Effekte in React, indem ein Promise 'geworfen' wird. React fängt diesen 'Suspender' in der nächsten Suspense-Boundary auf und startet das Rendering erneut, sobald das Promise aufgelöst ist. Dies ermöglicht eine synchron wirkende Datenabruf-Logik innerhalb von Komponenten.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function wrapPromise(promise) {let status = 'pending';let result;let suspender = promise.then((r) => { status = 'success'; result = r; },(e) => { status = 'error'; result = e; });return {read() {if (status === 'pending') throw suspender;if (status === 'error') throw result;return result;}};}
react
Erklärung
1
if (status === 'pending') throw suspender;
Wirft das Promise, um React zu signalisieren, dass die Komponente noch nicht bereit zum Rendern ist.
2
if (status === 'error') throw result;
Wirft den Fehler, damit er von einer Error Boundary abgefangen werden kann.