การเปลี่ยนแปลงข้อมูลผลิตภัณฑ์ใน Redux store

เราได้เรียนรู้วิธีการเพิ่มผลิตภัณฑ์แล้ว แต่ถ้าเราต้องการเปลี่ยนแปลงข้อมูลเกี่ยวกับผลิตภัณฑ์ล่ะ? มาดูกันว่าจะทำได้อย่างไรในบทเรียนนี้และบทเรียนต่อๆ ไป

มาเปิดแอปพลิเคชันผลิตภัณฑ์ของเราและเข้าไปที่ไฟล์ productsSlice.js เริ่มต้นด้วยการที่เราต้องเขียน reducer อีกตัวสำหรับ slice products ซึ่งจะทำงานเมื่อมีการอัปเดตผลิตภัณฑ์ ตั้งชื่อมันว่า productUpdated และเพิ่มลงในฟิลด์ reducers หลังจาก reducer productAdded และส่งพารามิเตอร์ state และ action ให้มันทันที ซึ่งเราจำได้ว่า reducer ทำงานบนพื้นฐานนี้:

products/productsSlice.jsreducers: {
  productAdded(state, action) {
    state.push(action.payload)
  },
  productUpdated(state, action) {},
},

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

jsx{
  type: 'products/productUpdated',
  payload: {id, name, desc, price, amount}
}

เมื่อเข้าใจประเด็นหลักแล้ว ตอนนี้เราสามารถเขียนโค้ดสำหรับ productUpdated ภายในวงเล็บปีกกาได้ ก่อนอื่นดึงข้อมูลที่เปลี่ยนแปลงจาก object action:

products/productsSlice.jsproductUpdated(state, action) {
  const { id, name, desc, price, amount } = action.payload
},

ตอนนี้เราจะหา ผลิตภัณฑ์ที่ต้องการเปลี่ยนแปลงโดยใช้ id ที่ได้มา:

products/productsSlice.jsproductUpdated(state, action) {
  const { id, name, desc, price, amount } = action.payload
  const desiredProduct = state.find(product => product.id === id)
},

ถ้าหาผลิตภัณฑ์ดังกล่าวเจอใน store เราจะแทนที่ข้อมูลของมันด้วยค่าต่างๆ ใหม่:

products/productsSlice.jsproductUpdated(state, action) {
  const { id, name, desc, price, amount } = action.payload
  const desiredProduct = state.find(product => product.id === id)
  if (desiredProduct) {
    desiredProduct.name = name
    desiredProduct.desc = desc
    desiredProduct.price = price
    desiredProduct.amount = amount
  }
},

สิ่งที่เหลืออยู่สำหรับเราคือการส่งออก action creator สำหรับใช้ในคอมโพเนนต์ ซึ่ง createSlice จะสร้างให้เราอย่างง่ายดาย มาเพิ่มมันลงในการส่งออกที่ท้ายไฟล์ พร้อมกับ productAdded ที่มีอยู่:

products/productsSlice.jsexport const { productAdded, productUpdated } = productsSlice.actions