การส่งข้อมูลโดยใช้ thunk ใน Redux

ในบทเรียนที่แล้วเราได้เรียนรู้เกี่ยวกับการจัดการ POST request บนเซิร์ฟเวอร์จำลองของเรา คราวนี้ มาลองเขียนฟังก์ชัน thunk ที่จะส่ง request ไปยังเซิร์ฟเวอร์กัน

มาเปิดแอปพลิเคชันเกี่ยวกับสินค้าของเรา และในนั้น เปิดไฟล์ productsSlice.js ตอนนี้หลังจาก thunk fetchProducts แล้ว เราจะใช้ createAsyncThunk สร้าง thunk addProduct:

products/productsSlice.jsexport const addProduct = createAsyncThunk()

พารามิเตอร์แรกที่เราจะส่งเข้าไปใน createAsyncThunk คือ 'products/addProduct' และพารามิเตอร์ที่สองคือ callback แบบอะซิงโครนัส ซึ่งจะรับอ็อบเจ็กต์ที่มี ข้อมูลของสินค้าใหม่:

products/productsSlice.jsexport const addProduct = createAsyncThunk(
  'products/addProduct',
  async (newProduct) => {}
)

ในโค้ดของ callback นี้ เราจะเรียกใช้ client ส่งพาธและอ็อบเจ็กต์สินค้าไปเป็นพารามิเตอร์ จากนั้นคืนค่าข้อมูลการตอบกลับ:

products/productsSlice.jsexport const addProduct = createAsyncThunk(
  'products/addProduct',
  async (newProduct) => {
    const response = await client.post('/fakeServer/products', newProduct)
    return response.data
  }
)

ตอนนี้มาดูที่ด้านล่างในโค้ดที่ฟิลด์ reducers สำหรับ productsSlice ก่อนหน้านี้เราเพิ่ม สินค้าใหม่โดยใช้ reducer productAdded ซึ่งมีเมธอด reducer และ prepare ตอนนี้เราสร้าง ข้อมูลที่จำเป็นบนเซิร์ฟเวอร์และทำงาน กับ thunk ดังนั้นเราจะลบ reducer productAdded ออกจากโค้ดตรงนี้ทั้งหมด จากนั้นเพิ่มเข้าไปใน เมธอด extraReducers (ที่ส่วนท้ายของโค้ด) อีกหนึ่ง reducer เพิ่มเติม ซึ่งในกรณีที่ request สำเร็จ จะเพิ่มเข้าไปใน slice products สินค้าใหม่โดยตรงจาก payload ของแอคชัน (จำไว้ว่าโค้ดแบบนี้เป็นไปได้ ต้องขอบคุณ createSlice ที่มีเอกลักษณ์เฉพาะตัว):

products/productsSlice.js.addCase(addProduct.fulfilled, (state, action) => {
  state.products.push(action.payload)
})

ใช่แล้ว อีกอย่าง อย่าลืมเอา nanoid ออก จากบรรทัด import และ productAdded ออกจาก export แอคชันที่ส่วนท้ายไฟล์ด้วย