JS - reaktywne zmienne (koncept)

Poznamy, czym są reaktywne zmienne i jak je osiągnąć za pomocą obiektu Proxy. Dobra lekcja po mutation observerach oraz początkach frameworków frontendowo-reaktywnych.

Ok, rzućmy okiem na ten kod:

let name = "John";

let fullname = name + " " + "Doe";

console.log(fullname);
//John Doe

name = "Jane";

console.log(fullname);
//John Doe

To już wiemy, czym jest brak reaktywności zmiennej. Teraz poznajmy zmienną reaktywną, do dowolnego kompilatora svelte online musimy wkleić ten kod:

<script>
	let name = 'John';

	$: fullname = name + " " + "Doe";
	
	$: console.log(fullname);
   
	setTimeout(function(){
		name = "Jane";
	}, 3000);
	
</script>

Dostaniemy najpierw John Doe, potem Jane Doe. Ok, ale jak to osiągnąć w czystym JS? Za pomocą proxy:

let name = {
    name: "John"
};
let fullname = name.name + " Doe";

const nameHandler = {
    set(obj, prop, value){
        fullname = value + " Doe"; 
    }
}

let nameProxy = new Proxy(name, nameHandler);


console.log(fullname);
//John Doe

nameProxy.name = "Jane";

console.log(fullname);
//Jane Doe

Proxy działa na obiektach, ponadto posiada więcej „pułapek” jak się one nazywają, niż tylko set i niedługo poznamy je wszystkie, na razie niech nam tyle wystarczy.

JS – reaktywne zmienne (koncept)