Hiểu quản lý nhà nước trong các ứng dụng Svelte

Quản lý trạng thái là một phần quan trọng của mọi ứng dụng web hiện đại. Mỗi khung phát triển web chính, như React và Vue, có các cách xử lý trạng thái khác nhau.

Svelte không thoát khỏi thách thức trong việc quản lý trạng thái và thư viện đưa ra nhiều chiến lược để giải quyết vấn đề này.

Quản lý nhà nước là gì và tại sao nó quan trọng?

Trong lĩnh vực phát triển web, thuật ngữ “trạng thái” liên quan đến thông tin thể hiện trạng thái hiện tại của một trang web cụ thể hoặc các thành phần cấu thành của nó. Để minh họa khái niệm này, hãy xem xét việc tạo một thị trường trực tuyến nơi người dùng có thể duyệt hàng hóa, thêm các mặt hàng đã chọn vào giỏ hàng ảo của họ và hoàn tất giao dịch bằng cách xử lý thanh toán.

Để luôn hiển thị số lượng mặt hàng chính xác trong biểu tượng giỏ hàng, bất kể trang web hiện đang xem, người ta có thể thấy quản lý trạng thái là một công cụ không thể thiếu. Cách tiếp cận này đảm bảo rằng giỏ hàng sẽ tự động điều chỉnh nội dung của nó theo thời gian thực khi người dùng thêm hoặc xóa các mặt hàng, bất kể vị trí của họ trên trang web.

Quản lý trạng thái hiệu quả đóng một vai trò quan trọng trong việc duy trì tổ chức và sự mạch lạc của dữ liệu trong các thành phần khác nhau của ứng dụng. Điều này cuối cùng góp phần mang lại trải nghiệm người dùng hợp lý và liền mạch giúp giảm thiểu sự nhầm lẫn và tình tiết tăng nặng.

Quản lý nhà nước ở Svelte

Về bản chất, người ta có thể sử dụng dấu bằng (’=’) trong Svelte để mô tả và sửa đổi một biến trạng thái. Để minh họa, giả sử nội dung của phần tử h1 phản ánh một biến trạng thái cụ thể; người ta có thể thực hiện điều này như sau:

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

<h1>
{count}
</h1>

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

Đoạn mã được cung cấp khai báo một thuộc tính được đặt tên, count và khởi tạo giá trị của nó về 0. Ngoài ra, nó còn thêm một câu lệnh gán giá trị hiện tại của count cho thẻ # của phần tử HTML. Cuối cùng, một trình xử lý sự kiện được gắn vào một nút, cho phép người dùng tăng trạng thái count khi họ nhấp vào nút đã nói.

thông qua GIPHY

Cập nhật biến trạng thái mảng trong Svelte

Thật vậy, chúng ta hãy xem xét chi tiết đoạn mã tiếp theo:

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

Đoạn mã được cung cấp thiết lập sự tương ứng giữa biến trạng thái “todoList” và cấu trúc dữ liệu mảng. Khi nhấp vào nút “Xóa mục cuối cùng”, hệ thống sẽ thực thi chức năng “removeLastItem()”, chức năng này sẽ xóa phần tử gần đây nhất trong biến “todoList”.

Thật vậy, nếu một người thực thi mã này trong trình duyệt web và tương tác với nó bằng cách nhấp vào phần tử được thiết kế để xóa mục cuối cùng, sẽ không có thay đổi nào được phản ánh trong danh sách được hiển thị.

thông qua GIPHY

Để tránh các vấn đề tiềm ẩn về hiệu suất có thể phát sinh từ việc sử dụng toán tử “=” kết hợp với phương pháp thao tác mảng chẳng hạn như “.pop()” trong ngữ cảnh của ứng dụng Svelte, người ta có thể sử dụng chiến lược giải quyết bằng cách hiển thị đệ quy toàn bộ cấu trúc danh sách thông qua một quá trình được gọi là"phân công lại". Điều này liên quan đến việc cập nhật tham chiếu của đối tượng dữ liệu gốc để trỏ lại chính nó, từ đó nhắc khung đánh giá lại và cập nhật cách trình bày của nó dựa trên trạng thái đã sửa đổi của các biến liên quan.

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

Khi thực thi mã trong trình duyệt web, dự kiến ​​mảng trạng thái sẽ được cập nhật như dự định khi nhấp vào nút được chỉ định.

thông qua GIPHY

Quản lý nhà nước với các cửa hàng mảnh dẻ

Trong Svelte, các kho lưu trữ được sử dụng để tạo điều kiện thuận lợi cho việc chia sẻ trạng thái giữa các thành phần không được kết nối thông qua hệ thống phản ứng. Về cơ bản, cửa hàng là một đối tượng có thể được đăng ký bằng cách sử dụng phương thức subscribe , cho phép các thành phần giám sát các cập nhật được thực hiện đối với dữ liệu của nó. Để tạo một kho lưu trữ đọc và ghi đơn giản, người ta phải nhập hàm có thể ghi từ mô-đun JavaScript svelte/store, như minh họa bên dưới:

 import { writeable } from "svelte/store"

Chắc chắn, hãy tưởng tượng trong giây lát rằng người ta có một tập lệnh store.js bao gồm các nội dung sau:

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

Mã được cung cấp sẽ tạo một hằng số có tên gọi là “todoList” và cung cấp một mảng làm đầu vào cho một đối tượng có thể đọc được. Do đó, giờ đây người ta có thể giới thiệu miền lưu trữ trong bất kỳ thành phần nào yêu cầu tiện ích của nó:

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

Để truy cập vào một phiên bản cụ thể của một đối tượng trong một lớp trong Python, người ta có thể sử dụng phương thức \_\_getitem\_\_ hoặc subscribe. Điều này cho phép truy xuất trực tiếp và thao tác dữ liệu mong muốn mà không cần phải điều hướng qua các cấp độ lồng nhau khác nhau trong hệ thống phân cấp lớp.

 let list;

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

Hàm gọi lại được liên kết với phương thức subscribe chấp nhận giá trị lưu trữ hiện tại làm tham số đầu vào và gán nó cho biến cục bộ item. Do đó, người ta có thể hiển thị từng mục trong mảng list bằng cú pháp được cung cấp.

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

Để sửa đổi giá trị của một cửa hàng, bạn có thể sử dụng phương thức update() . Phương thức này có chức năng gọi lại chấp nhận giá trị lưu trữ hiện tại làm đầu vào và trả về phần tử được cập nhật sẽ thay thế nó.

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

Tạo cửa hàng chỉ đọc trong Svelte

Trong một số trường hợp nhất định, có thể cần phải hạn chế khả năng sửa đổi dữ liệu của một thành phần trong một cửa hàng cụ thể bằng cách chuyển đổi kết nối của nó sang chế độ chỉ đọc. Điều này có thể đạt được bằng cách sử dụng chức năng có thể đọc được, đóng vai trò như công cụ sửa đổi quyền truy cập cho sự tương tác của thành phần với cửa hàng.

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

Việc không có sẵn phương thức update() trên các giá trị lưu trữ chỉ đọc đòi hỏi phải tránh một số thao tác nhất định, chẳng hạn như cố gắng sửa đổi nội dung của chúng thông qua phương thức đã nói, điều này sẽ dẫn đến lỗi thời gian chạy.

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

Sử dụng Cửa hàng với API ngữ cảnh

Svelte cung cấp API ngữ cảnh, có thể được sử dụng bằng cách nhập hàm setContext từ mô-đun’svelte’. Điều này cho phép các nhà phát triển tạo và quản lý các giá trị ngữ cảnh trong ứng dụng của họ hiệu quả hơn.

 import {setContext} from "svelte"

Để chuyển thông tin từ thành phần cấp cao hơn sang thành phần cấp thấp hơn, một cách tiếp cận phổ biến là sử dụng các đạo cụ hoặc thuộc tính trong đánh dấu HTML của thành phần con. Điều này cho phép thành phần cha cung cấp các chi tiết và hướng dẫn cần thiết cho thành phần con để nó hoạt động hiệu quả.

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

<ChildComponent age={age} />

Việc sử dụng API ngữ cảnh cho phép giao tiếp hiệu quả giữa các thành phần khác nhau trong ứng dụng, bỏ qua yêu cầu truyền dữ liệu qua các biến trung gian. Một cơ chế có thể so sánh được React cung cấp bằng cách sử dụng hook useContext. Để hiển thị giá trị ngữ cảnh phản ứng trong Svelte, cần chuyển giá trị lưu trữ tương ứng vào ngữ cảnh.

Trong thành phần cha, người ta có thể gặp biểu diễn cấu trúc như sau:

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

Đoạn mã được cung cấp hiển thị một phiên bản của một cửa hàng được chuyển làm đối số cho hàm setContext cùng với một khóa cụ thể,‘age’. Trong lĩnh vực phát triển Svelte, được phép truy cập giá trị của một biến cửa hàng cụ thể bằng cách thêm ký hiệu đô la (’$’) trước chỉ định của cửa hàng.

Một thành phần con có thể truy cập giá trị ngữ cảnh do thành phần cha mẹ của nó cung cấp thông qua việc sử dụng hàm getContext , hàm này yêu cầu đặc tả khóa thích hợp để truy xuất thành công.

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

<h1>
    {$userAge}
</h1>

Quản lý trạng thái trong Svelte so với React

Quá trình quản lý trạng thái trong Svelte được sắp xếp hợp lý so với quy trình tương tự trong React, không yêu cầu gì hơn ngoài việc sử dụng dấu bằng (=) cho cả việc xác định và cập nhật trạng thái. Điều này trái ngược với các khung phát triển web như React, đòi hỏi phải triển khai các chức năng như useState và useReducer để giải quyết các thách thức quản lý trạng thái cơ bản.

Việc sử dụng các kỹ thuật quản lý trạng thái tiên tiến là một khía cạnh cơ bản trong phát triển phần mềm, đặc biệt là trong lĩnh vực ứng dụng web. Một số phương pháp tồn tại để tạo điều kiện thuận lợi cho nỗ lực này, chẳng hạn như triển khai React Context API hoặc các công cụ bên ngoài như Redux và Zustand. Tuy nhiên, liên quan đến khung Svelte, nó cung cấp các cơ chế nội bộ riêng giúp loại bỏ một cách hiệu quả yêu cầu hỗ trợ bổ sung thông qua thư viện của bên thứ ba. Điều này đạt được bằng cách tận dụng sức mạnh của Svelte Stores và sự kết hợp của API bối cảnh Svelte.