درک مدیریت دولتی در برنامه های کاربردی Svelte

اکثر برنامه های غیر پیش پا افتاده شامل ایالت و مدیریت آن هستند. بیاموزید که چگونه می توانید با داده ها برای ایجاد برنامه های وب منسجم و قابل اعتماد کار کنید.

مدیریت دولتی بخش مهمی از هر برنامه وب مدرن است. هر فریم ورک اصلی توسعه وب، مانند React و Vue، روش‌های مختلفی برای مدیریت وضعیت دارد.

Svelte نیز از این قاعده مستثنی نیست و کتابخانه چندین رویکرد برای مقابله با مشکل ایالت و نحوه مدیریت آن ارائه می دهد.

مدیریت دولتی چیست و چرا اهمیت دارد؟

در توسعه وب، “state” به داده هایی اطلاق می شود که وضعیت فعلی یک صفحه یا بخشی از آن را نشان می دهد. به ایجاد یک وب سایت خرید با صفحات زیاد فکر کنید. مردم می توانند به چیزهایی برای خرید نگاه کنند، اقلام را در یک سبد خرید قرار دهند و سپس پرداخت کنند.

اگر می‌خواهید نماد سبد خرید تعداد اقلامی را که در آن قرار دارد نشان دهد، مهم نیست صفحه فعلی چیست، مدیریت دولتی واقعاً مفید است. این اطمینان حاصل می کند که هر زمان که کاربر مواردی را اضافه یا حذف کند، بدون توجه به اینکه در کجای سایت هستند، سبد خرید بلافاصله به روز می شود.

مدیریت وضعیت مهم است زیرا ردیابی جریان داده در اجزای برنامه را آسان تر می کند. در پایان کاربر، مدیریت وضعیت مناسب باید به تجربه ای کارآمدتر و کمتر خسته کننده منجر شود.

مدیریت دولتی در Svelte

در ابتدایی ترین سطح، می توانید با استفاده از علامت تساوی (=) یک متغیر حالت را در Svelte تعریف و به روز کنید. به عنوان مثال، اگر می خواهید محتوای متن یک h1 یک متغیر حالت خاص را منعکس کند، می توانید موارد زیر را انجام دهید:

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

<h1>
{count}
</h1>

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

این بلوک کد یک متغیر حالت، تعداد، با مقدار پیش‌فرض «0» را تعریف می‌کند. همچنین محتوای عنصر h1 را با مقدار فعلی این متغیر count تنظیم می کند. در نهایت روشی را در اختیار کاربر قرار می دهد که با کلیک روی دکمه، متغیر حالت شمارش را افزایش دهد.

از طریق GIPHY

به روز رسانی یک متغیر حالت آرایه در Svelte

به بلوک کد زیر نگاهی بیندازید:

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

این بلوک کد یک آرایه را به متغیر حالت، todoList متصل می کند. هنگامی که روی دکمه Remove last item کلیک می کنید، تابع removeLastItem() را اجرا می کند که آخرین مورد از متغیر todoList را حذف می کند.

با این حال، اگر این کد را در مرورگر اجرا کنید، متوجه خواهید شد که با کلیک بر روی دکمه حذف آخرین مورد، لیست به روز نمی شود.

از طریق GIPHY

Svelte به تخصیص با علامت تساوی واکنش نشان می دهد، بنابراین پس از تماس با Array.pop() هیچ به روز رسانی را راه اندازی نمی کند. برای دور زدن این موضوع، می‌توانید Svelte را فریب دهید تا با اختصاص متغیر todoList به خود، فهرست را دوباره ارائه کند:

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

وقتی کد را در مرورگر اجرا می کنید، وقتی روی دکمه کلیک می کنید، آرایه حالت باید به درستی به روز شود.

از طریق GIPHY

مدیریت ایالت با فروشگاه های Svelte

فروشگاه ها اشتراک گذاری وضعیت بین اجزای نامرتبط را آسان می کنند. یک فروشگاه در Svelte به سادگی یک شی است که می توانید با متد subscribe به آن متصل شوید و به تغییرات گوش دهید. برای نوشتن یک فروشگاه خواندن و نوشتن ساده، با وارد کردن تابع قابل نوشتن از ماژول جاوا اسکریپت svelte/store، مانند زیر شروع کنید:

import { writeable } from "svelte/store"

فرض کنید یک فایل store.js دارید که حاوی موارد زیر است:

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

این کد یک todoList ثابت ایجاد می کند و یک آرایه را به تابع قابل نوشتن تغذیه می کند. اکنون می توانید متغیر store را به هر مؤلفه ای که می خواهید از آن استفاده کنید وارد کنید:

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

اگر می خواهید به متغیر ارجاع دهید، از روش subscribe مانند زیر استفاده می کنید:

let list;

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

تابع callback متد subscribe مقدار ذخیره موجود را به عنوان آرگومان خود می گیرد و متغیر محلی لیست را با آرگومان آیتم ها تنظیم می کند. اکنون می توانید هر عنصر موجود در آرایه لیست را به این صورت رندر کنید:

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

برای به روز رسانی مقدار store، از متد update() استفاده کنید. تابع callback این متد مقدار ذخیره فعلی را می گیرد و عنصر جدیدی را که باید تنظیم شود به فروشگاه برمی گرداند.

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

ایجاد فروشگاه های فقط خواندنی در Svelte

گاهی اوقات، ممکن است بخواهید دسترسی یک مؤلفه به فروشگاه را با صرف خواندن آن محدود کنید. برای انجام این کار، از تابع خواندنی استفاده کنید.

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

متد ()update در مقادیر قابل خواندن فروشگاه موجود نیست، بنابراین چیزی شبیه به زیر یک خطا ایجاد می کند:

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

استفاده از Stores With Context API

Svelte یک Context API دارد که می توانید با وارد کردن تابع setContext از ماژول svelte از آن استفاده کنید:

import {setContext} from "svelte"

برای انتقال داده‌ها از یک مؤلفه والد به یک مؤلفه فرزند، می‌توانید موارد زیر را انجام دهید:

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

<ChildComponent age={age} />

این رویکرد به خوبی کار می‌کند، اما Context API راهی برای ارتباط اجزا با یکدیگر بدون انتقال داده‌ها فراهم می‌کند. React عملکرد مشابهی را با قلاب useContext ارائه می دهد. از آنجایی که Context در Svelte واکنش‌پذیر نیست، باید یک مقدار store را به متن ارسال کنید تا واکنش‌پذیر شود.

در مولفه والد، می توانید موارد زیر را داشته باشید:

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

بلوک کد بالا یک فروشگاه را تعریف می کند و ذخیره را به تابع setContext در کنار یک کلید “age” منتقل می کند. در Svelte، می توانید با قرار دادن یک “$” قبل از نام فروشگاه، به یک مقدار فروشگاه ارجاع دهید.

اکنون هر مؤلفه فرزند می تواند با فراخوانی تابع getContext و ارسال کلید مربوطه، از مقدار متن از مؤلفه والد استفاده کند.

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

<h1>
    {$userAge}
</h1>

مدیریت دولتی در Svelte در مقابل React

مدیریت حالت در Svelte بسیار ساده‌تر از React است – برای تعریف و به‌روزرسانی وضعیت فقط به علامت تساوی (=) نیاز دارید. در چارچوب‌های وب مانند React، برای انجام وظایف مدیریت حالت ساده‌تر به قلاب‌هایی مانند useState و useReducer نیاز دارید.

برای اشتراک‌گذاری حالت‌های پیچیده بین مؤلفه‌ها، می‌توانید از React Context API یا کتابخانه‌های خارجی مانند Redux و Zustand استفاده کنید. در Svelte، عملاً نیازی به کتابخانه خارجی در هنگام مدیریت حالت‌های پیچیده نیست، زیرا Svelte Stores و Svelte Context API وجود دارند تا کار را برای شما انجام دهند.

منبع مقاله