การเตรียมข้อมูลสำหรับอ็อบเจกต์ action ใน Redux

ไม่นานมานี้เราได้พูดคุยกับคุณเกี่ยวกับเรื่องที่ว่า ฟังก์ชัน createSlice คาดหวังหนึ่ง อาร์กิวเมนต์เมื่อสร้าง action.payload ด้านหนึ่งสิ่งนี้ทำให้การใช้งานง่ายขึ้น แต่อีกด้านอาจต้องการการเคลื่อนไหวเพิ่มเติม สำหรับการเตรียมเนื้อหาของ อ็อบเจกต์ action

มาเปิดแอปพลิเคชันของเราเกี่ยวกับ สินค้า และในไฟล์ NewProductForm.jsx โปรดสังเกตบรรทัดโค้ดต่อไปนี้:

NewProductForm.jsxdispatch(productAdded({
  id: nanoid(), name, desc, price, amount
}))

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

ปัญหาเหล่านี้เราสามารถแก้ไขได้อีกครั้งด้วยความช่วยเหลือจาก createSlice อันโด่งดังของเรา เนื่องจากเมื่อเขียนรีดิวเซอร์ มันอนุญาตให้เราใช้ฟังก์ชันคอลแบ็ก prepare ซึ่งเราสามารถเขียนลอจิกต่างๆ, สร้างตัวเลขสุ่ม และอื่นๆ ภายในนั้นได้ ใน กรณีเช่นนี้ค่าสำหรับฟิลด์ของรีดิวเซอร์อาจ ถูกแสดงในรูปของอ็อบเจกต์ต่อไปนี้:

jsx{reducer, prepare}

มาเปิดไฟล์ของเรา productsSlice.js และเปลี่ยนโค้ดสำหรับรีดิวเซอร์ productAdded ตอนนี้โค้ดส่วนนี้:

products/ProductSlice.jsproductAdded(state, action) {
  state.push(action.payload)
},

เราจะเปลี่ยนเป็นดังต่อไปนี้ ซึ่ง ฟังก์ชัน reducer จะดูแล การอัปเดตสเตทใน store และ prepare จะ คืนค่าอ็อบเจกต์ payload ที่ มี id ที่สร้างขึ้นและ ข้อมูลอื่นๆ ของเรา:

products/ProductSlice.jsproductAdded: {
  reducer(state, action) {
    state.push(action.payload)
  },
  prepare(name, desc, price, amount) {
    return {
      payload: {
        id: nanoid(),
        name,
        desc,
        price,
        amount,
      },
    }
  },
},

เนื่องจากตอนนี้เราจะสร้าง id ที่นี่ ไม่ใช่ในคอมโพเนนต์ เรา มาเพิ่ม nanoid ในการนำเข้า:

products/ProductSlice.jsimport { createSlice, nanoid } from '@reduxjs/toolkit'

สุดท้าย เรามาทำการเปลี่ยนแปลงใน NewProductForm.jsx แทนที่ บรรทัด:

products/NewProductForm.jsxdispatch(productAdded({
  id: nanoid(), name, desc, price, amount
}))

เราจะมีแบบนี้ ซึ่งเราเพียงแค่ ส่งผ่านข้อมูลที่จำเป็น โดยคั่นด้วยเครื่องหมายจุลภาค (อย่าลืมในไฟล์นี้ให้ลบ nanoid ออกจากการนำเข้า):

products/NewProductForm.jsxdispatch(productAdded(name, desc, price, amount))

มาเริ่มต้นแอปพลิเคชัน จากนั้นสร้างสินค้าใหม่ และตรวจสอบให้แน่ใจว่าเราไม่ได้ทำอะไรพัง