Memahami Manajemen Negara pada Aplikasi Svelte

Manajemen negara adalah bagian penting dari setiap aplikasi web modern. Setiap kerangka pengembangan web utama, seperti React dan Vue, memiliki cara berbeda dalam menangani status.

Svelte tidak terkecuali, dan perpustakaan menawarkan beberapa pendekatan untuk mengatasi masalah negara dan cara mengelolanya.

Baca Juga:

Mau Berkarir di Dunia blockchain? Ini Dia 10 Skill yang Harus Kamu Dalami!

Apa Itu Pengelolaan Negara dan Mengapa Penting?

Dalam pengembangan web, “status” mengacu pada data yang menginformasikan situasi terkini suatu halaman atau bagiannya. Bayangkan membuat situs belanja dengan banyak halaman. Orang dapat melihat barang yang akan dibeli, memasukkan barang ke dalam keranjang, lalu membayar.

Jika Anda ingin ikon keranjang menunjukkan jumlah item di dalamnya, tidak peduli apa halaman saat ini, Anda akan merasakan manajemen status sangat berguna. Ini akan memastikan keranjang diperbarui segera setiap kali pengguna menambahkan atau menghapus item, di mana pun item tersebut berada di situs.

Pengelolaan status penting karena memudahkan pelacakan aliran data di seluruh komponen aplikasi. Di pihak pengguna, pengelolaan status yang tepat akan menghasilkan pengalaman yang lebih efisien dan tidak membuat frustrasi.

Manajemen Negara di Svelte

Pada tingkat paling dasar, Anda dapat mendefinisikan dan memperbarui variabel status di Svelte menggunakan tanda sama dengan (=). Misalnya, jika Anda menginginkan konten teks a h1 untuk mencerminkan variabel keadaan tertentu, Anda dapat melakukan hal berikut:

 <script>
let count = 0;
</script>
<h1>
{count}
</h1>
<button on:click={()=>count=count + 1}> Increase Count </button>
 

Blok kode ini mendefinisikan variabel status, menghitung, dengan nilai default “0”. Ini juga mengatur konten h1 elemen ke nilai saat ini ini menghitung variabel. Terakhir, ini memberi pengguna cara untuk meningkatkan variabel status hitungan dengan mengklik tombol.

Memperbarui Variabel Status Array di Svelte

Lihatlah blok kode berikut:

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

Blok kode ini mengikat array ke variabel status, daftar tugas. Ketika Anda mengklik Hapus item terakhir tombol, itu menjalankan hapusItem Terakhir() fungsi yang menghapus item terakhir dari daftar tugas variabel.

Namun, jika Anda menjalankan kode ini di browser, Anda akan melihat bahwa, saat Anda mengklik tombol untuk menghapus item terakhir, daftarnya tidak diperbarui.

Svelte bereaksi terhadap tugas dengan tanda sama dengan, sehingga tidak akan memicu pembaruan apa pun setelah panggilan ke Array.pop(). Untuk menyiasatinya, Anda dapat mengelabui Svelte agar merender ulang daftar dengan menugaskan daftar tugas variabel ke dirinya sendiri:

 function removeLastItem() {
  todoList.pop();
  
  todoList = todoList; 
}
 

Saat Anda menjalankan kode di browser, array status akan diperbarui dengan benar saat Anda mengklik tombol.

Mengelola Negara Dengan Toko Langsing

Toko memudahkan untuk berbagi status antara komponen yang tidak terkait. Toko di Svelte hanyalah sebuah objek yang dapat Anda kaitkan dan dengarkan perubahannya langganan metode. Untuk menulis penyimpanan baca-tulis yang sederhana, mulailah dengan mengimpor dapat ditulis fungsi dari langsing/toko Modul JavaScript, seperti ini:

 import { writeable } from "svelte/store"
 

Katakanlah, Anda mempunyai toko.js file yang berisi berikut ini:

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

Kode ini menetapkan sebuah konstanta, daftar tugasdan memasukkan array ke dalam dapat ditulis fungsi. Anda sekarang dapat mengimpor variabel store ke komponen mana pun yang ingin Anda gunakan:

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

Jika Anda ingin mereferensikan variabel, Anda menggunakan langganan metode seperti ini:

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

Fungsi panggilan balik dari langganan metode mengambil nilai penyimpanan yang ada sebagai argumennya dan menetapkan daftar variabel lokal ke item argumen. Sekarang, Anda dapat merender setiap elemen di dalamnya daftar susunan seperti ini:

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

Untuk memperbarui nilai penyimpanan, gunakan memperbarui() metode. Fungsi panggilan balik metode ini mengambil nilai penyimpanan saat ini dan mengembalikan elemen baru untuk disetel ke penyimpanan.

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

Membuat Toko Read-Only di Svelte

Terkadang, Anda mungkin ingin membatasi akses komponen ke penyimpanan dengan menjadikannya hanya-baca. Untuk melakukannya, gunakan dapat dibaca fungsi.

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

Itu memperbarui() metode ini tidak tersedia pada nilai penyimpanan yang dapat dibaca, jadi sesuatu seperti berikut ini akan menimbulkan kesalahan:

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

Menggunakan Toko Dengan API Konteks

Svelte memiliki API Konteks yang dapat Anda gunakan dengan mengimpor setKonteks fungsi dari langsing modul:

 import {setContext} from "svelte"
 

Untuk meneruskan data dari komponen induk ke komponen anak, Anda dapat melakukan hal berikut:

 
<script>
let age = 42;
</script>
<ChildComponent age={age} />
 

Pendekatan ini berfungsi dengan baik, namun Context API menyediakan cara bagi komponen untuk berkomunikasi satu sama lain tanpa meneruskan data. React menyediakan fungsionalitas serupa dengan kait useContext. Karena Konteks di Svelte tidak reaktif, Anda perlu meneruskan nilai penyimpanan ke konteks untuk membuatnya reaktif.

Di komponen induk, Anda dapat memiliki yang berikut ini:

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

Blok kode di atas mendefinisikan toko dan meneruskan toko tersebut ke setKonteks berfungsi di samping kunci “usia”. Di Svelte, Anda dapat mereferensikan nilai toko dengan menambahkan “$” sebelum nama toko.

Setiap komponen anak sekarang dapat menggunakan nilai konteks dari komponen induk, dengan memanggil dapatkan Konteks berfungsi dan meneruskan kunci yang sesuai.

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

Manajemen Negara di Svelte vs. React

Manajemen Status di Svelte jauh lebih sederhana daripada React—Anda hanya memerlukan tanda sama dengan (=) untuk mendefinisikan dan memperbarui status. Dalam kerangka web seperti React, Anda memerlukan pengait seperti useState Dan gunakanReducer untuk menangani tugas-tugas manajemen negara yang lebih sederhana.

Untuk berbagi status kompleks antar komponen, Anda dapat menggunakan React Context API atau perpustakaan eksternal seperti Redux dan Zustand. Di Svelte, hampir tidak diperlukan perpustakaan eksternal saat menangani status kompleks, karena Svelte Stores dan Svelte Context API siap melakukan pekerjaan tersebut untuk Anda.