Giới thiệu

Trong bài viết này, chúng ta sẽ khám phá cách sử dụng Zustand trong gói workbench của mã nguồn Motia. Zustand là một thư viện quản lý trạng thái đơn giản và hiệu quả cho React, giúp các nhà phát triển dễ dàng quản lý dữ liệu trong ứng dụng của họ. Chúng ta sẽ tìm hiểu về hai cửa hàng (store) chính: useFlowStore và useTabsStore.

Mục lục

• Giới thiệu
• useFlowStore
• useTabsStore
• Thực hành tốt nhất
• Cạm bẫy thường gặp
• Mẹo hiệu suất
• Khắc phục sự cố
• Kết luận

useFlowStore

Cửa hàng useFlowStore được sử dụng trong packages/workbench/flow/flow-page.tsx. Dưới đây là một ví dụ:

import { useFlowStore } from '@/stores/use-flow-store'
import { FlowConfigResponse, FlowResponse } from '@/types/flow'
import { useStreamItem } from '@motiadev/stream-client-react'
import { FlowView } from './flow-view'

export const FlowPage = () => {
  const selectedFlowId = useFlowStore((state) => state.selectedFlowId)

Cửa hàng này được định nghĩa trong packages/workbench/stores/use-flow-store.ts như sau:

export const useFlowStore = create(
  persist<UseFlowStore>(
    (set) => ({
      flows: [],
      setFlows: (flows) => set({ flows }),
      selectFlowId: (flowId) =>
        set((state) => {
          if (state.selectedFlowId === flowId) {
            return state
          }
          return { selectedFlowId: flowId }
        }),
    }),
    {
      name: 'motia-flow-storage',
      storage: createJSONStorage(() => localStorage),
    },
  ),
)

Cách hoạt động của useFlowStore

Cửa hàng useFlowStore cho phép bạn lưu trữ và quản lý danh sách các luồng (flows) cũng như ID của luồng đã chọn. Hàm setFlows cho phép cập nhật danh sách luồng, trong khi selectFlowId giúp người dùng chọn luồng bằng cách truyền vào ID luồng.

useTabsStore

Cửa hàng useTabsStore được sử dụng trong packages/workbench/src/App.tsx. Dưới đây là một ví dụ:

import { StatesPage } from './components/states/states-page'
import { useTabsStore } from './stores/use-tabs-store'

enum TabLocation {
  TOP = 'top',
  BOTTOM = 'bottom',
}

export const App: FC = () => {
  const tab = useTabsStore((state) => state.tab)
  const setTopTab = useTabsStore((state) => state.setTopTab)
  const setBottomTab = useTabsStore((state) => state.setBottomTab)

Và cửa hàng useTabsStore được định nghĩa như sau:

import { create } from "zustand";
import { createJSONStorage, persist } from "zustand/middleware";

interface TabsState {
  tab: Record<string, string>;
  setTopTab: (tab: string) => void;
  setBottomTab: (tab: string) => void;
}

export const useTabsStore = create(persist<TabsState>((set) => ({
  tab: {
    top: "flow",
    bottom: "tracing",
  },
  setTopTab: (tab) => set((state) => ({ tab: { ...state.tab, top: tab } })),
  setBottomTab: (tab) => set((state) => ({ tab: { ...state.tab, bottom: tab } })),
}), {
  name: 'motia-tabs-storage',
  storage: createJSONStorage(() => localStorage),
}))

Cách hoạt động của useTabsStore

Cửa hàng useTabsStore cho phép bạn quản lý tab trong ứng dụng. Bạn có thể thiết lập tab trên cùng hoặc dưới cùng thông qua các hàm setTopTab và setBottomTab.

Thực hành tốt nhất

• Sử dụng Zustand cho quản lý trạng thái đơn giản: Zustand rất thích hợp cho các ứng dụng nhỏ và vừa, nơi bạn không cần đến một giải pháp phức tạp như Redux.
• Tách biệt logic của cửa hàng: Giữ cho logic của cửa hàng tách biệt khỏi các thành phần UI để dễ dàng bảo trì và mở rộng.

Cạm bẫy thường gặp

• Không quản lý trạng thái đúng cách: Đảm bảo rằng bạn không tạo ra nhiều cửa hàng cho cùng một loại trạng thái, điều này có thể dẫn đến sự phức tạp và khó khăn trong việc theo dõi.
• Không sử dụng persist khi không cần thiết: Chỉ sử dụng tính năng persist khi bạn thực sự cần lưu trữ trạng thái qua phiên làm việc.

Mẹo hiệu suất

• Sử dụng selectors để tối ưu hóa re-renders: Sử dụng selectors trong Zustand để chỉ chọn các phần của trạng thái mà bạn cần, giúp giảm thiểu số lần re-render không cần thiết.
• Tránh cập nhật trạng thái quá thường xuyên: Cố gắng nhóm các cập nhật trạng thái lại với nhau để tránh nhiều lần render.

Khắc phục sự cố

• Trạng thái không cập nhật: Kiểm tra xem bạn đã sử dụng đúng hook và đang truy cập trạng thái đúng cách.
• Lỗi lưu trữ: Nếu bạn gặp vấn đề với localStorage, đảm bảo rằng bạn đã cấp quyền truy cập và không vượt quá giới hạn dung lượng lưu trữ.

Kết luận

Zustand là một lựa chọn tuyệt vời cho việc quản lý trạng thái trong các ứng dụng React, đặc biệt là trong các dự án mã nguồn mở như Motia. Qua bài viết này, hy vọng bạn đã có cái nhìn sâu sắc về cách sử dụng Zustand trong gói workbench. Hãy thử áp dụng những kiến thức này trong dự án của bạn và khám phá nhiều hơn về cách tối ưu hóa hiệu suất ứng dụng!

Liên hệ

Nếu bạn có bất kỳ câu hỏi nào hoặc muốn thảo luận sâu hơn về Zustand, hãy liên hệ với tôi qua email: ramu.narasinga@gmail.com.

Tài liệu tham khảo

1. Dòng mã 1
2. Dòng mã 2
3. Dòng mã 3
4. Dòng mã 4