Khi biểu mẫu, bản xem trước và nút Lưu cần dùng chung một bản nháp

Ví dụ React và ghi chú triển khai

Hàm tạo kết hợp React Context, useSyncExternalStore và Immer: Context tìm store gần nhất, các thành phần đăng ký theo dõi những snapshot đã chọn qua useSyncExternalStore, còn Immer lo phần cập nhật bản nháp lồng nhau cùng các bản vá nghịch đảo dùng để hoàn tác khi cần. Theo tài liệu, gói hỗ trợ React 18 và 19, được phân phối dưới dạng ES modules cùng khai báo kiểu TypeScript.

npm install @khanglvm/react

Tạo bản nháp thuộc phạm vi trang

Ví dụ này giữ bản nháp tin tuyển dụng dưới một Provider, giống trình sửa đã kể ở trên. Các lời gọi api đại diện cho cơ chế lưu của chính ứng dụng.

import { createContextState } from "@khanglvm/react"

type JobDraftState = {
  step: "details" | "requirements" | "preview"
  draft: {
    title: string
    skills: string[]
  }
  saving: boolean
  error?: string
}

export const {
  Provider: JobDraftStateProvider,
  useContextStateValue: useJobDraftValue,
  useSetContextState: useSetJobDraftState,
  useStateSnapshotGetter: useJobDraftSnapshot,
} = createContextState<JobDraftState>("JobDraft")

export function JobDraftPage({ children }: { children: React.ReactNode }) {
  return (
    <JobDraftStateProvider
      initialState={{
        step: "details",
        draft: { title: "", skills: [] },
        saving: false,
      }}
    >
      {children}
    </JobDraftStateProvider>
  )
}

export function StepIndicator() {
  const step = useJobDraftValue((state) => state.step)
  return <span>{step}</span>
}

export function AddSkillButton({ skill }: { skill: string }) {
  const setState = useSetJobDraftState(false)

  return (
    <button
      onClick={() => {
        setState((draft) => {
          draft.draft.skills.push(skill)
        })
      }}
    >
      Add skill
    </button>
  )
}

export function SaveDraftButton() {
  const setState = useSetJobDraftState()
  const getSnapshot = useJobDraftSnapshot()

  async function saveDraft() {
    const revert = setState((draft) => {
      draft.saving = true
      draft.error = undefined
    })

    try {
      await api.saveDraft(getSnapshot((state) => state.draft))

      setState((draft) => {
        draft.saving = false
      })
    } catch {
      revert()

      setState((draft) => {
        draft.error = "Could not save the draft."
      })
    }
  }

  return <button onClick={saveDraft}>Save</button>
}

Mình đổi tên các hook trả về theo trạng thái mà chúng phụ trách, nhờ vậy nơi sử dụng sẽ import hook của bản nháp tin tuyển dụng thay vì một hook trạng thái chung chung.

Chọn kiểu truy cập mà thành phần cần

Trên trang tìm kiếm, thanh bộ lọc có thể đọc bộ lọc trong khi thanh công cụ đọc dữ liệu đang được chọn. Khi ai đó bấm xuất dữ liệu, thao tác này có thể lấy snapshot của bộ lọc hiện tại. Giá trị ngôn ngữ thì nằm cao hơn, ở phần trạng thái chung của khung ứng dụng phía trên từng trang, nên nhãn có thể đổi ngôn ngữ mà không làm mất phần biểu mẫu đang điền hay đóng các ngăn trượt đang mở.

Selector chỉ nên suy ra kết quả từ trạng thái, vì thời gian, giá trị ngẫu nhiên hoặc lời gọi mạng có thể thay đổi độc lập với trạng thái được chọn và khiến việc theo dõi không còn đáng tin cậy. Phần triển khai lưu đệm các kết quả selector bằng nhau về cấu trúc để giữ ổn định tham chiếu của chúng.

Đọc sau khi chờ bất đồng bộ

Hàm lấy snapshot hữu ích khi quá trình kiểm tra tính hợp lệ hoàn tất sau lúc người dùng đã sửa thêm:

function SaveButton() {
  const getEditorSnapshot = useEditorSnapshot()

  async function save() {
    await api.validate()

    const latestDraft = getEditorSnapshot((state) => state.draft)
    await api.save(latestDraft)
  }

  return <button onClick={save}>Save</button>
}

Lần đọc đó không đăng ký theo dõi những thay đổi tiếp theo, nên giá trị mà thành phần hiển thị vẫn cần hook selector. Hàm xử lý sự kiện, phím tắt và thao tác lưu có cơ chế chờ người dùng ngừng sửa một lúc (debounce) có thể dùng hàm lấy snapshot khi cần giá trị hiện tại đúng lúc hành động.

Hoàn tác cập nhật hiển thị trước khi máy chủ xác nhận

Hàm cập nhật có thể giữ các bản vá nghịch đảo cần để hoàn tác sau khi yêu cầu thất bại:

async function archiveCandidate(id: string) {
  const revert = setCandidatesState((draft) => {
    const candidate = draft.itemsById[id]
    candidate.archived = true
  })

  try {
    await api.archiveCandidate(id)
  } catch {
    revert()
  }
}

Với những chỉnh sửa thường xuyên trong trình dựng trang, useSetBuilderState(false) vẫn cập nhật bản nháp nhưng bỏ qua việc tạo bản vá hoàn tác. Nhiều thay đổi cũng có thể được đẩy cập nhật cùng nhau qua một microtask được xếp hàng, và hook chạy sau đợt cập nhật hữu ích khi trình chỉnh sửa cần tính lại dữ liệu dẫn xuất tốn kém một lần sau cả đợt.

Làm rõ thời gian tồn tại và việc kết xuất phía máy chủ

Mỗi Provider tạo store riêng, nên dùng chung hàm tạo không làm các Provider hay các yêu cầu đến máy chủ dùng chung trạng thái. Giá trị ban đầu ở máy chủ và phía trình duyệt vẫn cần khớp nhau khi React tiếp quản giao diện đã kết xuất từ máy chủ (hydration).

Trạng thái ở khung ứng dụng có thể tồn tại qua các lần chuyển trang thông thường ở phía trình duyệt, trong khi trạng thái tính năng chỉ tồn tại khi Provider sở hữu nó vẫn được gắn vào cây giao diện. Trạng thái gắn với URL có thể dùng một store tham số truy vấn riêng với cùng cách đăng ký theo dõi; đưa trạng thái vào store này không tự khiến nó gắn với URL.

Gói còn hỗ trợ bản dịch có kiểm tra kiểu, sự kiện trình duyệt và các hàm tiện ích cho props cùng children, còn hướng dẫn trạng thái trình bày API và các giới hạn. Redux, Zustand và Jotai vẫn là những lựa chọn khác, với công cụ và mô hình trạng thái riêng; quy trình đã có của nhóm có thể là lý do hợp lý để tiếp tục dùng chúng.