Inzicht in statusbeheer in Svelte-toepassingen
Toestandsbeheer is een belangrijk onderdeel van elke moderne webapplicatie. Elk groot webontwikkelingsframework, zoals React en Vue, heeft verschillende manieren om met state om te gaan.
Svelte ontsnapt niet aan de uitdaging van het beheren van status en de bibliotheek presenteert meerdere strategieën om dit probleem aan te pakken.
Wat is statusbeheer en waarom is het belangrijk?
Op het gebied van webontwikkeling heeft de term “status” betrekking op informatie die de huidige status van een bepaalde webpagina of de samenstellende elementen ervan weergeeft. Om dit concept te illustreren, kun je denken aan het maken van een online marktplaats waar gebruikers koopwaar kunnen bekijken, geselecteerde artikelen aan hun virtuele winkelwagentje kunnen toevoegen en transacties kunnen voltooien door betalingen te verwerken.
Om altijd de juiste hoeveelheid items in een winkelwagenpictogram weer te geven, ongeacht de webpagina die op dat moment wordt bekeken, is statusbeheer een onmisbaar hulpmiddel. Deze aanpak zorgt ervoor dat de inhoud van het winkelwagentje dynamisch en in real-time wordt aangepast wanneer gebruikers items toevoegen of verwijderen, ongeacht hun locatie op de website.
Effectief statusbeheer speelt een cruciale rol bij het handhaven van de organisatie en samenhang van gegevens binnen de verschillende onderdelen van een applicatie. Dit draagt uiteindelijk bij aan een gestroomlijnde en naadloze gebruikerservaring die verwarring en ergernis minimaliseert.
Toestandsbeheer in Svelte
In essentie kan men het gelijkheidsteken (’=’) binnen Svelte gebruiken om een toestandsvariabele af te bakenen en te wijzigen. Ter illustratie, stel dat het gewenst is dat de inhoud van een h1 element een specifieke toestandsvariabele weerspiegelt, dan zou je dit als volgt kunnen implementeren:
<script>
let count = 0;
</script>
<h1>
{count}
</h1>
<button on:click={()=>count=count \\+ 1}> Increase Count </button>
Het gegeven codefragment declareert een named property, count , en initialiseert de waarde op nul. Daarnaast wordt een verklaring toegevoegd die de huidige dagwaarde van count toewijst aan de tag van het HTML-element. Tot slot is er een event listener gekoppeld aan een knop, waarmee gebruikers de status van count kunnen verhogen wanneer ze op de knop klikken.
Een array-statusvariabele bijwerken in Svelte
Laten we het volgende codefragment eens in detail bekijken:
<script>
let todoList = [
"Read my books",
"Eat some foods",
"Bath the dogs",
"Take out the garbage",
];
function removeLastItem() {
todoList.pop();
}
</script>
<ul>
{#each todoList as item}
<li>{item}</li>
{/each}
</ul>
<button on:click={() => removeLastItem()}> Remove last item</button>
Het gegeven codefragment legt een verband tussen de toestandsvariabele “todoList” en een array-gegevensstructuur. Wanneer je op de knop “Laatste item verwijderen” klikt, voert het systeem de functie “removeLastItem()” uit, die het meest recente element in de variabele “todoList” verwijdert.
Als deze code wordt uitgevoerd in een webbrowser en er interactie mee plaatsvindt door te klikken op het element dat het laatste item moet verwijderen, worden er geen wijzigingen weergegeven in de weergegeven lijst.
Om mogelijke prestatieproblemen te voorkomen die kunnen ontstaan door het gebruik van de “=” operator in combinatie met een array manipulatiemethode zoals “.pop()” binnen de context van een Svelte toepassing, zou men een workaround strategie kunnen toepassen door recursief de gehele lijststructuur te renderen door middel van een proces dat bekend staat als “reassignment”. Dit houdt in dat de referentie van het oorspronkelijke gegevensobject wordt bijgewerkt om terug te wijzen naar zichzelf, waardoor het framework wordt gevraagd om de presentatie opnieuw te evalueren en bij te werken op basis van de gewijzigde status van de bijbehorende variabelen.
function removeLastItem() {
todoList.pop();
// Assign the updated array to itself
todoList = todoList;
}
Bij het uitvoeren van de code in een webbrowser wordt verwacht dat de toestandsarray wordt bijgewerkt zoals bedoeld wanneer op de aangegeven knop wordt geklikt.
Toestand beheren met Svelte Stores
In Svelte worden stores gebruikt om het delen van toestand tussen niet-verbonden componenten via een reactief systeem te vergemakkelijken. In essentie is een store een object waarop geabonneerd kan worden met de subscribe methode, waardoor componenten updates van de data kunnen volgen. Om een eenvoudige lees-en-schrijf store te maken, moet de writable functie geïmporteerd worden uit de svelte/store JavaScript module, zoals hieronder getoond:
import { writeable } from "svelte/store"
Stelt u zich eens voor dat u een store.js script heeft dat de volgende inhoud bevat:
import { writable } from "svelte/store";
export const todoList = writable([
"Read my books",
"Eat some foods",
"Bath the dogs",
"Take out the garbage",
"Water the flowers"
]);
De meegeleverde code maakt een genoemde constante genaamd “todoList” en levert een array als invoer voor een leesbaar object. Bijgevolg kan men nu het storagedomein invoeren in elk onderdeel dat het nut ervan vereist:
<script>
import { todoList } from "./store";
</script>
Om toegang te krijgen tot een specifieke instantie van een object binnen een klasse in Python, kan men de methode __getitem__ of abonnement gebruiken. Hierdoor kunnen de gewenste gegevens direct worden opgevraagd en gemanipuleerd zonder door verschillende niveaus van nesting binnen de klassehiërarchie te hoeven navigeren.
let list;
todoList.subscribe((items)=>{
list = items;
})
De callback-functie die is gekoppeld aan de methode subscribe accepteert een huidige winkelwaarde als invoerparameter en wijst deze toe aan de items lokale variabele. Bijgevolg kan elk item in de array list worden weergegeven met de opgegeven syntaxis.
<ul>
{#each list as item}
<li>{item}</li>
{/each}
</ul>
Om de waarde van een winkel te wijzigen, kun je de methode update() gebruiken. Deze methode heeft een callbackfunctie die de huidige storewaarde als invoer accepteert en het bijgewerkte element retourneert dat het moet vervangen.
todoList.update((items) => {
items.pop();
return items;
});
Alleen-lezen winkels aanmaken in Svelte
In bepaalde situaties kan het nodig zijn om de mogelijkheid van een component om gegevens in een specifieke winkel te wijzigen te beperken door de verbinding te converteren naar alleen-lezen modus. Dit kan worden bereikt met de functie readable die dient als een toegangswijziger voor de interactie van de component met de store.
import { readable } from 'svelte/store';
export const todoList = readable([
"Read my books",
"Eat some foods",
"Bath the dogs",
"Take out the garbage",
"Water the flowers"
]);
De onbeschikbaarheid van de methode update() op alleen-lezen winkelwaarden maakt het noodzakelijk dat bepaalde bewerkingen worden vermeden, zoals een poging om de inhoud te wijzigen via deze methode, wat zou resulteren in een runtime error.
function removeLastItem() {
todoList.update((items) => {
items.pop();
return items;
});
}
Stores gebruiken met de Context API
Svelte biedt een Context API, die gebruikt kan worden door de setContext functie van de ‘svelte’ module te importeren. Hiermee kunnen ontwikkelaars contextwaarden in hun applicaties efficiënter aanmaken en beheren.
import {setContext} from "svelte"
Om informatie over te brengen van een component op een hoger niveau naar een component op een lager niveau, is het gebruikelijk om props of attributen te gebruiken in de HTML-markup van de kindcomponent. Hierdoor kan de oudercomponent de nodige details en instructies geven aan de kindcomponent zodat deze effectief kan functioneren.
// Parent Component
<script>
let age = 42;
</script>
<ChildComponent age={age} />
Het gebruik van de Context API maakt effectieve communicatie mogelijk tussen verschillende componenten binnen een applicatie, waarbij de vereiste om gegevens via tussenliggende variabelen te verzenden, wordt omzeild. React biedt een vergelijkbaar mechanisme met behulp van de useContext hook. Om een contextwaarde reactief te maken in Svelte, is het nodig om de bijbehorende storewaarde door te geven aan de context.
In de parent component kan men een structurele representatie tegenkomen als volgt:
<script>
import { writable } from "svelte/store";
import Component2 from "./Component2.svelte";
import { setContext } from "svelte";
let numberInStore = writable(42);
setContext("age", numberInStore);
</script>
<ChildComponent />
<button on:click={() => $numberInStore\\+\\+}>Increment Number</button>
Het gegeven codefragment toont een instantie van een store die als argument wordt doorgegeven aan de functie setContext samen met een specifieke sleutel, ‘age’. Binnen het domein van Svelte-ontwikkeling is het toegestaan om de waarde van een bepaalde winkelvariabele te benaderen door een dollarteken (’$’) toe te voegen voorafgaand aan de naam van de winkel.
Een kindcomponent heeft toegang tot de contextwaarde die door zijn oudercomponent wordt verschaft door het gebruik van de functie getContext , die de specificatie van een geschikte sleutel vereist voor een succesvolle opvraging.
<script>
import { getContext } from "svelte";
let userAge = getContext("age");
</script>
<h1>
{$userAge}
</h1>
Toestandsbeheer in Svelte vs. React
Het toestandsbeheer in Svelte is gestroomlijnd vergeleken met zijn tegenhanger in React, en vereist niets meer dan het gebruik van een gelijkheidsteken (=) voor zowel het definiëren als het bijwerken van de toestand. Dit staat in contrast met webontwikkelingsframeworks zoals React, die de implementatie van functionaliteiten zoals useState en useReducer nodig hebben om basisuitdagingen op het gebied van toestandsbeheer aan te pakken.
Het gebruik van geavanceerde toestandsbeheertechnieken is een fundamenteel aspect in softwareontwikkeling, vooral binnen het domein van webapplicaties. Er bestaan verschillende methoden om dit te vergemakkelijken, zoals de implementatie van React Context API of externe tools zoals Redux en Zustand. Het Svelte framework biedt echter zijn eigen interne mechanismen die de behoefte aan extra ondersteuning door bibliotheken van derden effectief elimineren. Dit wordt bereikt door gebruik te maken van de kracht van Svelte Stores en de integratie van de Svelte Context API.