ฟอร์มและสถานะเฉพาะที่ใน Redux

ในบทเรียนที่ผ่านมา เราได้เรียนรู้วิธีการดึงข้อมูลจาก store และแสดงผลในคอมโพเนนต์ React ในบทเรียนนี้ เราจะเริ่มต้นการเพิ่มข้อมูลใหม่ เราจะทำสิ่งนี้โดยใช้ฟอร์ม ซึ่งเมื่อผู้ขายกรอกข้อมูลแล้ว จะสามารถเพิ่มสินค้าใหม่ได้

เริ่มจากที่ว่า การใช้สถานะส่วนกลางของ Redux ไม่เหมาะสมในทุกกรณีเสมอไป มีบางกรณีที่เราสามารถสร้างสถานะ เฉพาะที่ เพื่อตอบสนองความต้องการของเราได้ เราจะเรียกสถานะเฉพาะที่ว่าสถานะที่ใช้ภายในคอมโพเนนต์เฉพาะเจาะจงเพื่อจุดประสงค์ทางเทคนิค ตัวอย่างเช่น เพื่อซ่อนหรือแสดงบางสิ่งเมื่อกดปุ่ม

ในกรณีของเรา ผู้ใช้จะป้อนข้อมูลลงในฟอร์ม และแน่นอนว่าเราต้องการสถานะสำหรับสิ่งนี้ เราอาจใช้สถานะส่วนกลางของ Redux แต่ก็ไม่มีความจำเป็น เนื่องจากสถานะของเราจะทำงาน เฉพาะในตำแหน่งเดียวในแอปพลิเคชันสำหรับฟอร์มเพิ่มสินค้าเท่านั้น กฎสำคัญที่ต้องปฏิบัติตามคือ สถานะเฉพาะที่ต้องไม่ทำงานนอกขอบเขตของคอมโพเนนต์ที่สร้างมันขึ้นมา และไม่ควรเกี่ยวข้องกับ store โดยเด็ดขาด แนวทางปฏิบัตินี้มักถูกใช้เมื่อสร้างฟอร์ม

มาเปิดโฟลเดอร์ products ของแอปพลิเคชันสินค้าของเรา สร้างไฟล์ NewProductForm.jsx ภายในนั้น และนำเข้า Hook useState:

products/NewProductForm.jsximport { useState } from 'react'

ตอนนี้เรามาสร้างคอมโพเนนต์ฟอร์มและกำหนดสถานะปกติภายในมัน เช่นเดียวกับที่เราเคยทำใน React เราต้องการสถานะเพื่อจัดการกับชื่อ คำอธิบาย ราคา และจำนวนสินค้า:

products/NewProductForm.jsxexport const NewProductForm = () => {
  const [name, setName] = useState('')
  const [desc, setDesc] = useState('')
  const [price, setPrice] = useState(0)
  const [amount, setAmount] = useState(0)
}

ต่อไป เพิ่มการจัดการมาตรฐานสำหรับแต่ละฟิลด์เมื่อผู้ใช้ป้อนข้อมูล:

products/NewProductForm.jsxconst onNameChanged = (e) => setName(e.target.value)
const onDescChanged = (e) => setDesc(e.target.value)
const onPriceChanged = (e) => setPrice(e.target.value)
const onAmountChanged = (e) => setAmount(e.target.value)

จากนั้น คืนค่าการแสดงผลในคอมโพเนนต์ซึ่งมีหัวเรื่องและฟอร์มว่าง:

products/NewProductForm.jsxreturn (
  <div>
    <h2>Add a New Product</h2>
    <form>
    </form>
  </div>
)