Giới thiệu

Nếu bạn là một lập trình viên React, có lẽ bạn đã nghe về Zustand và có thể bạn cũng rất yêu thích nó. Đây là một công cụ quản lý trạng thái tối giản, nhanh chóng và không định hướng, đã thu hút được sự chú ý lớn trong cộng đồng phát triển. Zustand là một công cụ tuyệt vời để kiểm soát sự phức tạp của trạng thái phía client.

Tuy nhiên, khi các ứng dụng của chúng ta trở nên hợp tác hơn và hoạt động trên nhiều thiết bị khác nhau, một câu hỏi được đặt ra: khi nào thì một công cụ quản lý trạng thái phía client không đủ? Điều này dẫn chúng ta đến một lớp công cụ mới, như Vaultrice.

Vậy có phải đây là cuộc chiến "Zustand vs. Vaultrice"? Không hẳn. Sự thật là, chúng không phải là đối thủ cạnh tranh trực tiếp. Chúng là những người đồng hành, mỗi công cụ được thiết kế để giải quyết một vấn đề cụ thể khác nhau. Hướng dẫn này sẽ giới thiệu cho bạn biết nên chọn công cụ nào và cách chúng có thể hoạt động cùng nhau để xây dựng các ứng dụng hiện đại mạnh mẽ.

Phần 1: Thế giới bên trong một tab trình duyệt - Hiểu về Zustand

Công việc chính của Zustand là quản lý trạng thái trong một phiên bản ứng dụng đơn lẻ và tách biệt.

Hãy tưởng tượng Zustand như một bảng trắng trong một văn phòng. Tất cả mọi người trong phòng đó đều có thể nhìn thấy bảng và nó là một cách tuyệt vời để theo dõi những gì đang diễn ra - nhưng chỉ cho phòng đó. Khi bạn rời khỏi, thông tin sẽ bị mất (trừ khi bạn lưu vào localStorage). Những người ở các phòng khác (các tab trình duyệt hoặc thiết bị khác) có bảng trắng riêng của họ.

Zustand là công cụ hoàn hảo cho trạng thái UI tạm thời không cần chia sẻ, như trạng thái mở/đóng của một modal, văn bản trong một thanh tìm kiếm, hoặc các cờ tải.

Ví dụ: Cửa hàng Zustand cho trạng thái UI

import { create } from 'zustand'

const useUIStore = create((set) => ({
  isSidebarOpen: false,
  toggleSidebar: () => set((state) => ({ isSidebarOpen: !state.isSidebarOpen })),
}))

Phần 2: Thế giới giữa các trình duyệt - Hiểu về Vaultrice

Công việc chính của Vaultrice là quản lý trạng thái cần được chia sẻ và đồng bộ hóa giữa các phiên bản ứng dụng khác nhau (tab, thiết bị, người dùng và thậm chí là miền khác nhau).

Hãy tưởng tượng Vaultrice như một tài liệu Google được chia sẻ. Mọi người, bất kể họ đang ở phòng (tab) nào, tòa nhà (trình duyệt) nào hay thành phố (thiết bị) nào, đều nhìn vào cùng một tài liệu. Khi một người gõ, mọi người khác sẽ thấy sự cập nhật ngay lập tức.

Đây là công cụ hoàn hảo cho trạng thái cần lưu trữ, chia sẻ và thời gian thực. Nó đạt được điều này thông qua một SDK cốt lõi mạnh mẽ, @vaultrice/sdk.

Cái nhìn sâu sắc về @vaultrice/sdk

Trước khi chúng ta đi sâu vào các hook React, quan trọng là phải hiểu rằng chúng là một lớp tiện ích trên một SDK JavaScript mạnh mẽ, không phụ thuộc vào framework. @vaultrice/sdk cung cấp sức mạnh cơ bản và có thể được sử dụng trong bất kỳ dự án JavaScript nào (Node.js, React, Vue, Svelte, Deno, Bun, v.v.).

Nó cung cấp hai mô hình API chính:

• NonLocalStorage: Một API dựa trên phương pháp quen thuộc, giống như localStorage (setItem, getItem) nhưng được cung cấp bởi đám mây, bất đồng bộ và thời gian thực.
• SyncObject: Một API phản ứng hiện đại sử dụng Proxy của JavaScript để làm cho trạng thái chia sẻ của bạn hành xử giống như một đối tượng cục bộ (doc.title = 'Tên mới').

Ngoài việc lưu trữ đơn giản theo cặp khóa-giá trị, SDK cốt lõi cũng cung cấp một tập hợp các tính năng mà các công cụ quản lý phía client không cung cấp, chẳng hạn như:

• Presence API: Để xây dựng danh sách "ai đang trực tuyến".
• Hỗ trợ Offline-First: Với một mẫu outbox cho đồng bộ tự động khi kết nối lại.
• Mã hóa đầu cuối: Để bảo mật dữ liệu tối đa.

Chiến lược đồng thời hoàn chỉnh - Thay đổi cuộc chơi

Đây là lúc sự phân biệt trở nên sâu sắc. Hãy tưởng tượng hai người dùng đang cố gắng sửa đổi một danh sách chia sẻ cùng một lúc. Với mẫu đọc-sửa-ghi truyền thống, một cập nhật có thể ghi đè và xóa bỏ cập nhật khác. Đây là một tình huống đua tranh cổ điển, và chỉ riêng Zustand không thể khắc phục điều này cho dữ liệu chia sẻ.

Vaultrice giải quyết vấn đề này bằng một chiến lược hai mũi nhọn: Các hoạt động nguyên tử và Kiểm soát đồng thời lạc quan (OCC).

1. Các hoạt động nguyên tử cho các sửa đổi phổ biến

Đối với các cập nhật cụ thể, @vaultrice/sdk cung cấp các hoạt động nguyên tử phía máy chủ mà được đảm bảo là an toàn.

• incrementItem() / decrementItem(): Để đếm an toàn.
• push(): Để thêm một phần tử vào mảng một cách nguyên tử.
• splice(): Để xóa, thay thế hoặc chèn các phần tử vào mảng một cách nguyên tử (hoạt động giống như Array.prototype.splice).
• merge(): Để hợp nhất các trường vào một đối tượng.
• setIn(): Để an toàn thiết lập một giá trị sâu bên trong một đối tượng lồng nhau.

2. Kiểm soát đồng thời lạc quan (OCC) cho các cập nhật phức tạp

Nếu cập nhật của bạn phức tạp hơn một thao tác đơn giản như thêm hoặc hợp nhất? Đối với những trường hợp này, Vaultrice cung cấp OCC. Khi bạn setItem, bạn có thể cung cấp dấu thời gian updatedAt của dữ liệu mà bạn đã đọc ban đầu. Máy chủ sẽ chỉ áp dụng cập nhật của bạn nếu dữ liệu chưa thay đổi kể từ khi bạn đọc nó.

// 1. Lấy phần tử và dấu thời gian của nó
const item = await nls.getItem('project-details');

// 2. Người dùng thực hiện các thay đổi phức tạp trong một biểu mẫu...
const newDetails = { ...item.value, name: 'Tên dự án mới', status: 'hoạt động' };

// 3. Gửi cập nhật với dấu thời gian gốc
try {
  await nls.setItem('project-details', newDetails, { updatedAt: item.updatedAt });
} catch (error) {
  // Điều này sẽ thất bại nếu một người dùng khác đã thay đổi chi tiết trong thời gian đó.
  // Bây giờ bạn có thể xử lý xung đột một cách duyên dáng (ví dụ: refetch và merge).
  console.error('Phát hiện xung đột!');
}

Mẫu "Cùng nhau tốt hơn": Trạng thái UI cục bộ + Trạng thái toàn cầu chia sẻ

Cách tiếp cận mạnh mẽ nhất là sử dụng cả hai công cụ cho những gì chúng làm tốt nhất. Đây không phải là một cuộc chiến "so sánh"; đây là một sự hợp tác.

Sử dụng Zustand cho: Trạng thái UI cục bộ, tạm thời.
Sử dụng Vaultrice cho: Trạng thái toàn cầu chia sẻ, bền vững.

Hãy xây dựng một Danh sách Todo Hợp tác mà hoàn toàn minh họa cho mẫu này và sử dụng thao tác nguyên tử push với sự hỗ trợ của @vaultrice/react.

import { create } from 'zustand'
import { useNonLocalArray } from '@vaultrice/react'

// 1. Cửa hàng Zustand cho trạng thái UI cục bộ
// Điều này quản lý văn bản của trường nhập, chỉ dành cho từng người dùng.
const useTodoStore = create((set) => ({
  newTodoText: '',
  setNewTodoText: (text) => set({ newTodoText: text }),
}))

// --- Thành phần hợp tác ---
function CollaborativeTodoList() {
  // 2. Lấy trạng thái cục bộ và hành động từ cửa hàng Zustand của chúng ta
  const { newTodoText, setNewTodoText } = useTodoStore()

  // 3. Lấy trạng thái chia sẻ, thời gian thực từ Vaultrice
  // Mảng 'todos' được đồng bộ giữa tất cả người dùng.
  const [todos, { push }, error, isLoading] = useNonLocalArray('todo-list-project', 'tasks', {
    credentials: { /* Thông tin xác thực Vaultrice của bạn */ }
  })

  const handleAddTodo = (e) => {
    e.preventDefault();
    if (!newTodoText.trim()) return;

    // 4. Sử dụng hành động 'push' nguyên tử để cập nhật trạng thái chia sẻ
    // Đây là một thao tác an toàn, thời gian thực mà ngăn chặn các tình huống đua.
    push({ id: Date.now(), text: newTodoText, completed: false });

    // 5. Xóa trạng thái nhập cục bộ
    setNewTodoText('');
  };

  if (isLoading) return <div>Đang tải nhiệm vụ...</div>;
  if (error) return <div>Lỗi: {error.message}</div>;

  return (
    <div>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
      <form onSubmit={handleAddTodo}>
        <input
          type="text"
          value={newTodoText}
          onChange={(e) => setNewTodoText(e.target.value)}
          placeholder="Thêm một nhiệm vụ mới..."
        />
        <button type="submit">Thêm</button>
      </form>
    </div>
  );
}

Hệ sinh thái React đầy đủ: @vaultrice/react

Hook useNonLocalArray chỉ là một phần của thư viện React toàn diện được thiết kế để làm cho việc sử dụng Vaultrice trở nên tự nhiên. Gói @vaultrice/react bao gồm một bộ hook chuyên biệt cho mọi trường hợp sử dụng:

• useNonLocalState: Để quản lý một giá trị đơn giản.
• useNonLocalCounter: Để thực hiện các thao tác tăng/giảm nguyên tử.
• useNonLocalArray: Để quản lý danh sách với thao tác push và splice nguyên tử.
• useNonLocalObject: Để quản lý các đối tượng với thao tác merge và setIn nguyên tử.
• useMessaging: Để có các tính năng chat thời gian thực và hiện diện.

Kết luận

Vậy, Zustand hay Vaultrice? Câu trả lời chắc chắn là "cả hai."

• Đối với trạng thái sống và chết trong một tab trình duyệt duy nhất, Zustand là một lựa chọn tuyệt vời.
• Đối với trạng thái cần được chia sẻ, đồng bộ và lưu trữ qua các tab, thiết bị và người dùng, Vaultrice là giải pháp.

Bằng cách hiểu vai trò khác nhau của chúng, bạn có thể kết hợp chúng để viết các ứng dụng sạch hơn, mạnh mẽ hơn và thực sự hợp tác.

Bắt đầu với Vaultrice miễn phí ngay hôm nay!