Zrozumienie zarządzania stanem w aplikacjach Svelte

Zarządzanie stanem jest ważną częścią każdej nowoczesnej aplikacji internetowej. Każdy z głównych frameworków webowych, takich jak React i Vue, ma różne sposoby obsługi stanu.

Svelte nie ucieka od wyzwań związanych z zarządzaniem stanem, a biblioteka przedstawia wiele strategii radzenia sobie z tą kwestią.

Czym jest zarządzanie stanem i dlaczego jest ważne?

W dziedzinie tworzenia stron internetowych termin “stan” odnosi się do informacji, które reprezentują obecny stan danej strony internetowej lub jej elementów składowych. Aby zilustrować tę koncepcję, rozważmy stworzenie internetowego rynku, na którym użytkownicy mogą przeglądać towary, dodawać wybrane przedmioty do swoich wirtualnych koszyków i dokonywać transakcji poprzez przetwarzanie płatności.

W celu wyświetlania dokładnej ilości przedmiotów w ikonie koszyka przez cały czas, niezależnie od aktualnie przeglądanej strony internetowej, zarządzanie stanem może okazać się niezbędnym narzędziem. Takie podejście zapewnia, że koszyk dynamicznie dostosowuje swoją zawartość w czasie rzeczywistym, gdy użytkownicy dodają lub usuwają przedmioty, niezależnie od ich lokalizacji na stronie internetowej.

Skuteczne zarządzanie stanem odgrywa kluczową rolę w utrzymaniu organizacji i spójności danych w różnych komponentach aplikacji. Ostatecznie przyczynia się to do usprawnionego i płynnego doświadczenia użytkownika, które minimalizuje zamieszanie i irytację.

Zarządzanie stanem w Svelte

Zasadniczo można wykorzystać znak równości ("=") w Svelte do określenia i modyfikacji zmiennej stanu. Dla przykładu, załóżmy, że pożądane jest, aby zawartość elementu h1 odzwierciedlała określoną zmienną stanu; można to zaimplementować w następujący sposób:

 <script>
let count = 0;
</script>

<h1>
{count}
</h1>

<button on:click={()=>count=count \\+ 1}> Increase Count </button>

Podany fragment kodu deklaruje nazwaną właściwość, count , i inicjuje jej wartość na zero. Dodatkowo dołącza instrukcję, która przypisuje aktualną wartość count do znacznika elementu HTML. Wreszcie, detektor zdarzeń jest dołączony do przycisku, który umożliwia użytkownikom zwiększenie stanu count po kliknięciu tego przycisku.

via GIPHY

Updating an Array State Variable in Svelte

Rzeczywiście, przeanalizujmy szczegółowo poniższy fragment kodu:

 <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>

Podany fragment kodu ustanawia zgodność między zmienną stanu “todoList” a strukturą danych tablicy. Po kliknięciu przycisku “Usuń ostatni element” system wykonuje funkcję “removeLastItem()”, która usuwa ostatni element ze zmiennej “todoList”.

Rzeczywiście, jeśli ktoś wykona ten kod w przeglądarce internetowej i wejdzie z nim w interakcję, klikając element przeznaczony do usunięcia ostatniego elementu, żadne zmiany nie zostaną odzwierciedlone na wyświetlanej liście.

via GIPHY

Aby uniknąć potencjalnych problemów z wydajnością, które mogą wynikać z użycia operatora “=” w połączeniu z metodą manipulacji tablicą, taką jak “.pop()” w kontekście aplikacji Svelte, można zastosować strategię obejścia, rekurencyjnie renderując całą strukturę listy w procesie znanym jako “ponowne przypisanie”. Obejmuje to aktualizację odniesienia do oryginalnego obiektu danych, aby wskazywało z powrotem na siebie, tym samym skłaniając framework do ponownej oceny i aktualizacji prezentacji w oparciu o zmodyfikowany stan powiązanych zmiennych.

 function removeLastItem() {
  todoList.pop();
  // Assign the updated array to itself
  todoList = todoList;
 }

Po wykonaniu kodu w przeglądarce internetowej oczekuje się, że tablica stanów zostanie zaktualizowana zgodnie z przeznaczeniem po kliknięciu wyznaczonego przycisku.

via GIPHY

Zarządzanie stanem za pomocą sklepów Svelte

W Svelte sklepy są wykorzystywane do ułatwienia współdzielenia stanu między niepołączonymi komponentami za pośrednictwem systemu reaktywnego. Zasadniczo sklep jest obiektem, który można subskrybować za pomocą metody subscribe , umożliwiając komponentom monitorowanie aktualizacji danych. Aby utworzyć prosty sklep do odczytu i zapisu, należy zaimportować funkcję writable z modułu JavaScript svelte/store , jak pokazano poniżej:

 import { writeable } from "svelte/store"

Oczywiście wyobraźmy sobie przez chwilę, że mamy skrypt store.js , który obejmuje następującą zawartość:

 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"
]);

Dostarczony kod tworzy nazwaną stałą o nazwie “todoList” i dostarcza tablicę jako dane wejściowe do czytelnego obiektu. W związku z tym można teraz wprowadzić storagedomain w dowolnym elemencie, który wymaga jego użyteczności:

 <script>
import { todoList } from "./store";
</script>

Aby uzyskać dostęp do określonej instancji obiektu w klasie w Pythonie, można użyć metody __getitem__ lub subscription . Pozwala to na bezpośrednie pobieranie i manipulowanie pożądanymi danymi bez konieczności przechodzenia przez różne poziomy zagnieżdżenia w hierarchii klas.

 let list;

todoList.subscribe((items)=>{
    list = items;
})

Funkcja wywołania zwrotnego powiązana z metodą subscribe przyjmuje bieżącą wartość store jako parametr wejściowy i przypisuje ją do zmiennej lokalnej items . W rezultacie można wyświetlić każdy element w tablicy list przy użyciu podanej składni.

 <ul>
  {#each list as item}
    <li>{item}</li>
  {/each}
</ul>

Aby zmodyfikować wartość sklepu, można użyć metody update() . Ta metoda zawiera funkcję zwrotną, która akceptuje aktualną wartość sklepu jako dane wejściowe i zwraca zaktualizowany element, który powinien ją zastąpić.

 todoList.update((items) => {
  items.pop();
  return items;
});

Tworzenie sklepów tylko do odczytu w Svelte

W niektórych sytuacjach może być konieczne ograniczenie możliwości komponentu do modyfikowania danych w określonym sklepie poprzez konwersję jego połączenia do trybu tylko do odczytu. Można to osiągnąć za pomocą funkcji readable , która służy jako modyfikator dostępu do interakcji komponentu ze sklepem.

 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"
]);

Niedostępność metody update() na wartościach sklepu tylko do odczytu wymaga unikania pewnych operacji, takich jak próba modyfikacji ich zawartości za pomocą tej metody, co spowodowałoby wyrzucenie błędu wykonania.

 function removeLastItem() {
  todoList.update((items) => {
    items.pop();
    return items;
  });
}

Korzystanie ze sklepów za pomocą interfejsu API kontekstu

Svelte udostępnia interfejs API kontekstu, który można wykorzystać, importując funkcję setContext z modułu “svelte”. Pozwala to programistom na bardziej efektywne tworzenie i zarządzanie wartościami kontekstu w ich aplikacjach.

 import {setContext} from "svelte"

Aby przenieść informacje z komponentu wyższego poziomu do komponentu niższego poziomu, jednym z powszechnych podejść jest wykorzystanie rekwizytów lub atrybutów w znacznikach HTML komponentu podrzędnego. Pozwala to komponentowi nadrzędnemu na dostarczenie niezbędnych szczegółów i instrukcji komponentowi podrzędnemu, aby mógł on skutecznie funkcjonować.

 // Parent Component
<script>
let age = 42;
</script>

<ChildComponent age={age} />

Wykorzystanie Context API pozwala na efektywną komunikację pomiędzy różnymi komponentami w aplikacji, omijając wymóg przesyłania danych przez zmienne pośredniczące. Porównywalny mechanizm zapewnia React, wykorzystując hak useContext . Aby wartość kontekstu była reaktywna w Svelte, konieczne jest przekazanie odpowiedniej wartości store do kontekstu.

W komponencie nadrzędnym można napotkać następującą reprezentację strukturalną:

 <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>

Podany fragment kodu przedstawia instancję sklepu przekazywaną jako argument do funkcji setContext wraz z określonym kluczem “age”. W sferze rozwoju Svelte dopuszczalny jest dostęp do wartości konkretnej zmiennej sklepu poprzez dodanie znaku dolara ("$") poprzedzającego oznaczenie sklepu.

Komponent podrzędny może uzyskać dostęp do wartości kontekstu dostarczonej przez jego komponent nadrzędny poprzez wykorzystanie funkcji getContext , która wymaga określenia odpowiedniego klucza do pomyślnego pobrania.

 <script>
  import { getContext } from "svelte";
  let userAge = getContext("age");
</script>

<h1>
    {$userAge}
</h1>

Zarządzanie stanem w Svelte vs. React

Proces zarządzania stanem w Svelte jest usprawniony w porównaniu do jego odpowiednika w React, wymagając jedynie użycia znaku równości (=) zarówno do definiowania, jak i aktualizowania stanu. Stoi to w kontraście do frameworków webowych, takich jak React, które wymagają implementacji funkcjonalności takich jak useState i useReducer , aby sprostać podstawowym wyzwaniom związanym z zarządzaniem stanem.

Wykorzystanie zaawansowanych technik zarządzania stanem jest podstawowym aspektem w tworzeniu oprogramowania, szczególnie w dziedzinie aplikacji internetowych. Istnieje kilka metod ułatwiających to przedsięwzięcie, takich jak implementacja React Context API lub zewnętrznych narzędzi, takich jak Redux i Zustand. Jeśli jednak chodzi o framework Svelte, oferuje on własne wewnętrzne mechanizmy, które skutecznie eliminują wymóg dodatkowego wsparcia za pośrednictwem bibliotek innych firm. Osiąga się to poprzez wykorzystanie mocy Svelte Stores i włączenie Svelte Context API.