การส่ง action และ hook useDispatch ใน Redux

เราได้นำองค์ประกอบทั้งหมดที่จำเป็นสำหรับการทำงานของแอปพลิเคชัน Redux ไปใช้จริงเกือบทั้งหมดแล้ว สิ่งที่เหลือคือการทำความเข้าใจเกี่ยวกับการส่ง action จากคอมโพเนนต์ React เท่านั้น เริ่มกันเลย

เปิดแอปพลิเคชันเกี่ยวกับผลิตภัณฑ์ของเรา ในฟอร์มของคอมโพเนนต์ NewProductForm เรามีปุ่มสำหรับบันทึกข้อมูลของผลิตภัณฑ์ใหม่ มาเพิ่ม handler การคลิกให้กับมันกัน เมื่อคลิกที่ปุ่ม ให้ handler onSaveProductClick ทำงาน:

products/NewProductForm.jsx<button type="button" onClick={onSaveProductClick}>
  save
</button>

เมื่อสร้างผลิตภัณฑ์ใหม่ เราจะต้องมี id ใหม่สำหรับมัน เราจะสร้าง id นั้นโดยใช้ไลบรารีชื่อดังอย่าง nanoid อนึ่ง ไม่จำเป็นต้องติดตั้งมันเพิ่ม เพราะมันมาพร้อมกับแพ็คเกจ RTK แล้ว มาเพิ่ม nanoid ในการนำเข้า:

products/NewProductForm.jsximport { nanoid } from '@reduxjs/toolkit'

เรายังจำได้ว่าวิธีเดียวที่จะเปลี่ยน state ได้คือการเรียกเมธอด dispatch ซึ่งมีอยู่ใน store และส่งอ็อบเจ็กต์ action ไป เพื่อให้เข้าถึงเมธอดนี้ เราจะใช้ React-Redux hook useDispatch มาเริ่มนำเข้า:

products/NewProductForm.jsximport { useDispatch } from 'react-redux'

ในโค้ดของฟังก์ชัน NewProductForm มาสร้างค่าคงที่ dispatch ทันทีหลังจากที่เราสร้างค่าคงที่สำหรับ local state ของเรา:

products/NewProductForm.jsxconst dispatch = useDispatch()

เรายังจำเป็นต้องนำเข้า action creator productAdded ซึ่งเราได้รับจากบทเรียนที่แล้ว:

products/NewProductForm.jsximport { productAdded } from './productsSlice'

ตอนนี้เราสามารถเขียนฟังก์ชัน handler onSaveProductClick ได้แล้ว มาทำก่อนคำสั่ง return:

products/NewProductForm.jsxconst onSaveProductClick = () => {}

ภายในฟังก์ชัน เราจะเรียก dispatch, สร้างอ็อบเจ็กต์ action โดยในพรอพเพอร์ตี้ payload จะมี id ที่สร้างขึ้น, ชื่อ, คำอธิบาย, ราคา และจำนวนของผลิตภัณฑ์ เราเอาข้อมูลทั้งหมดนี้จาก local state โดยที่ในตอนเริ่มต้นเราจะตรวจสอบในเงื่อนไขว่าทุกช่องถูกกรอกครบหรือไม่ - เฉพาะในกรณีนี้เท่านั้นเราจึงจะเรียก dispatch ในตอนท้ายของโค้ดฟังก์ชัน เราจะคืนค่า local state กลับสู่สถานะเริ่มต้น:

products/NewProductForm.jsxconst onSaveProductClick = () => {
  if (name && desc && price && amount) {
    dispatch(
      productAdded({
        id: nanoid(),
        name,
        desc,
        price,
        amount
      })
    )

    setName('')
    setDesc('')
    setPrice(0)
    setAmount(0)
  }
}

ตอนนี้มาลองรันแอปพลิเคชันของเรา กรอกข้อมูลลงในช่องฟอร์มแล้วกดปุ่มบันทึก เย่! ด้านล่างของเพจปรากฏผลิตภัณฑ์ใหม่แล้ว เปิด Redux DevTools และในนั้นเปิดแท็บ Inspector เราจะเห็นว่าด้านซ้ายนอกจาก @@INIT แล้ว ยังมี action ของเรา products/productAdded อีกด้วย และในส่วนด้านขวา เราสามารถคลิกที่แท็บ Action และ State สลับระหว่าง @@INIT และ products/productAdded ได้ ตอนนี้เราจะเห็นว่าผลิตภัณฑ์ใหม่ของเราถูกเพิ่มแล้ว นอกจากนี้ในแท็บ Action เรายังเห็น action ที่สร้างขึ้นอัตโนมัติโดยใช้ createSlice (เช่น ลองคลิกที่ Raw) เย่: เราไม่จำเป็นต้องเขียนมันด้วยมือ