Memudahkan Pengurusan Borang dalam React: useActionState vs useRBoxForm

Saya akan memperkenalkan perbandingan antara React 19 cangkuk baharu useActionState dan useRBoxForm dari f-box perpustakaan saya- bertindak balas.

Saya akan menerangkan ciri-ciri setiap pendekatan untuk membentuk pengurusan negeri dan cara memulakan useRBoxForm.

Jadual Kandungan

1. Pengenalan
2. Memperkenalkan useActionState
3. Memperkenalkan f-box-react dan useRBoxForm
4. Perbandingan: Perbezaan dalam Kebolehgunaan
5. Memasang dan Menyediakan f-box-react
6. Kesimpulan

pengenalan

Kait baharu React 19, useActionState, memudahkan penyerahan borang dan pengurusan keadaan yang terhasil. Sebaliknya, pustaka saya f-box-react menyediakan cangkuk pengurusan borang yang lebih maju yang dipanggil useRBoxForm.
Dalam artikel ini, saya akan membandingkan kedua-dua cangkuk ini dan berkongsi cara useRBoxForm boleh membantu memudahkan dan meningkatkan pengurusan borang anda.

Memperkenalkan useActionState

React 19 memperkenalkan useActionState, cangkuk yang menyediakan aliran mudah untuk mengendalikan penyerahan borang:

import { useActionState } from "react"

type FormState = {
  success?: boolean
  cartSize?: number
  message?: string
}

function addToCart(prevState: FormState, queryData: FormData) {
  const itemID = queryData.get("itemID")
  if (itemID === "1") {
    return {
      success: true,
      cartSize: 12,
    }
  } else {
    return {
      success: false,
      message: "The item is sold out.",
    }
  }
}

function AddToCartForm({
  itemID,
  itemTitle,
}: {
  itemID: string
  itemTitle: string
}) {
  const [formState, formAction, isPending] = useActionState<
    FormState,
    FormData
  >(addToCart, {})

  return (
    <form action={formAction}>
      {/* Form content */}
      {formState?.success && (
        <div>Item added to cart! Current cart size: {formState.cartSize}</div>
      )}
      {formState?.success === false && (
        <div>Failed to add item: {formState.message}</div>
      )}
    </form>
  )
}

Walaupun useActionState menyediakan mekanisme mudah untuk mengemas kini keadaan borang melalui fungsi panggil balik, kelemahannya ialah tanggungjawab untuk mengurus keadaan tertumpu pada satu objek. Ini boleh menjadi masalah apabila kerumitan bertambah.

Memperkenalkan f-box-react dan useRBoxForm

f-box-react ialah perpustakaan yang menyepadukan keupayaan reaktif RBox dengan React. Antara cirinya ialah useRBoxForm, cangkuk yang direka khusus untuk pengurusan borang, yang memisahkan data borang, logik pengesahan dan pengendalian mesej ralat dengan jelas, membolehkan pengendalian borang yang lebih bersih dan boleh diselenggara.

Sebagai contoh, berikut ialah sampel menggunakan useRBoxForm:

import { useRBoxForm } from "f-box-react"

type Form = {
  itemID: string
  cartSize: number
}

const validate = (form: Form) => ({
  itemID: [() => form.itemID === "1"],
  cartSize: [],
})

function AddToCartForm({
  itemID,
  itemTitle,
}: {
  itemID: string
  itemTitle: string
}) {
  const {
    form,
    edited,
    isPending,
    handleChange,
    handleValidatedSubmit,
    shouldShowError,
  } = useRBoxForm<Form>({ itemID, cartSize: 0 }, validate)

  const handleSubmit = handleValidatedSubmit(async (form) => {
    if (form.itemID === "1") {
      handleChange("cartSize", 12)
    }
  })

  return (
    <form onSubmit={handleSubmit}>
      <h2>{itemTitle}</h2>
      <button type="submit" disabled={isPending}>
        Add to Cart
      </button>
      {edited.itemID &&
        (shouldShowError("itemID")(0) ? (
          <div>Failed to add to cart: The item is sold out.</div>
        ) : (
          <div>Item added to cart! Current cart size: {form.cartSize}</div>
        ))}
    </form>
  )
}

Dengan useRBoxForm, anda boleh memisahkan logik dengan jelas untuk mengemas kini keadaan borang, mengendalikan pengesahan dan memaparkan mesej ralat, menghasilkan kod yang lebih mudah untuk diurus.

Perbandingan: Perbezaan dalam Kebolehgunaan

Dengan useActionState

• Reka Bentuk Mudah
  Ia menguruskan keputusan penyerahan borang dalam satu objek, yang sangat mudah untuk difahami apabila anda baru bermula.

• Tanggungjawab Tertumpu
  Mempunyai bendera kejayaan, mesej dan saiz troli semuanya dalam satu objek boleh menyukarkan untuk mengetahui tempat untuk membuat perubahan apabila ciri meningkat.

• Mencabar untuk Dilanjutkan
  Apabila perubahan keadaan atau pengesahan menjadi rumit, menyesuaikan diri secara fleksibel boleh berasa sukar.

Dengan useRBoxForm

• Pemisahan Peranan yang Jelas
  Dengan mengendalikan data borang, logik pengesahan dan mesej ralat secara berasingan, adalah jelas tempat untuk membuat perubahan.

• Kemudahan Penggunaan
  Memandangkan setiap fungsi adalah bebas, mengubah suai satu bahagian tidak menjejaskan yang lain, memastikan kod keseluruhan mudah.

• Jenis Keselamatan dan Keyakinan
  Dengan TypeScript mentakrifkan jenis yang jelas untuk data borang dan pengesahan, ralat yang tidak dijangka akan kurang berkemungkinan, menjadikan pembangunan lebih lancar.

• Kebolehgunaan semula
  Sebaik sahaja anda mencipta logik untuk mengurus borang, ia boleh digunakan semula dengan mudah merentas borang yang berbeza.

Secara keseluruhan, useRBoxForm membolehkan anda mengurus keadaan kompleks dengan lebih selesa dengan mengasingkan setiap kebimbangan.

Memasang dan Menyediakan f-box-react

1. Memasang f-box-react

Anda boleh memasang f-box-react menggunakan npm atau yarn:

import { useActionState } from "react"

type FormState = {
  success?: boolean
  cartSize?: number
  message?: string
}

function addToCart(prevState: FormState, queryData: FormData) {
  const itemID = queryData.get("itemID")
  if (itemID === "1") {
    return {
      success: true,
      cartSize: 12,
    }
  } else {
    return {
      success: false,
      message: "The item is sold out.",
    }
  }
}

function AddToCartForm({
  itemID,
  itemTitle,
}: {
  itemID: string
  itemTitle: string
}) {
  const [formState, formAction, isPending] = useActionState<
    FormState,
    FormData
  >(addToCart, {})

  return (
    <form action={formAction}>
      {/* Form content */}
      {formState?.success && (
        <div>Item added to cart! Current cart size: {formState.cartSize}</div>
      )}
      {formState?.success === false && (
        <div>Failed to add item: {formState.message}</div>
      )}
    </form>
  )
}

2. Penggunaan Asas

Import cangkuk useRBoxForm daripada f-box-react dan gunakannya dalam komponen borang anda:

import { useRBoxForm } from "f-box-react"

type Form = {
  itemID: string
  cartSize: number
}

const validate = (form: Form) => ({
  itemID: [() => form.itemID === "1"],
  cartSize: [],
})

function AddToCartForm({
  itemID,
  itemTitle,
}: {
  itemID: string
  itemTitle: string
}) {
  const {
    form,
    edited,
    isPending,
    handleChange,
    handleValidatedSubmit,
    shouldShowError,
  } = useRBoxForm<Form>({ itemID, cartSize: 0 }, validate)

  const handleSubmit = handleValidatedSubmit(async (form) => {
    if (form.itemID === "1") {
      handleChange("cartSize", 12)
    }
  })

  return (
    <form onSubmit={handleSubmit}>
      <h2>{itemTitle}</h2>
      <button type="submit" disabled={isPending}>
        Add to Cart
      </button>
      {edited.itemID &&
        (shouldShowError("itemID")(0) ? (
          <div>Failed to add to cart: The item is sold out.</div>
        ) : (
          <div>Item added to cart! Current cart size: {form.cartSize}</div>
        ))}
    </form>
  )
}

Untuk penggunaan yang lebih terperinci dan contoh lanjutan, lihat repositori GitHub atau dokumentasi rasmi di https://f-box-docs.com.

Kesimpulan

Terdapat banyak pendekatan untuk mengurus keadaan borang dalam React. Walaupun useActionState menarik kerana kesederhanaannya, ia boleh menjadi sukar apabila kerumitan meningkat. Sebaliknya, useRBoxForm daripada f-box-react memisahkan data borang, pengesahan dan mesej ralat, menawarkan penyelesaian yang lebih mudah diurus dan lebih meluas.

Saya harap artikel ini memberi anda gambaran tentang daya tarikan dan penggunaan f-box-react. Walaupun ia belum diketahui secara meluas, saya menggalakkan anda mencubanya!

Atas ialah kandungan terperinci Memudahkan Pengurusan Borang dalam React: useActionState vs useRBoxForm. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!