การรับข้อมูลผู้ขายใน Redux

มาเริ่มต้นแอปพลิเคชันของเราที่มี สินค้ากัน เราจะเห็นว่าในการ์ดสินค้า ไม่ได้แสดงข้อมูลผู้ขาย มาดึงข้อมูลนั้น จากเซิร์ฟเวอร์และแสดงผลกัน ในการทำเช่นนี้ เราจะต้องดำเนินการตามลำดับขั้นตอนที่คุ้นเคย

เริ่มต้นด้วยการเปิดไฟล์ server.js ค้นหา อาร์เรย์ handlers และเพิ่มการจัดการ GET request อีกหนึ่งรายการ (หลังจากจัดการ GET สำหรับสินค้า) อย่างที่เห็น มันเกือบจะ เหมือนกันทุกประการ:

api/server.jshttp.get('/fakeServer/sellers', async () => {
  await delay(ARTIFICIAL_DELAY_MS)
  return HttpResponse.json(db.seller.getAll())
}),

เราได้จัดการ request บนเซิร์ฟเวอร์แล้ว ขั้นตอนต่อไป เราต้องเขียน thunk สำหรับรับข้อมูลจาก เซิร์ฟเวอร์ในไฟล์ sellersSlice.js ในการนี้ ให้ import client และ createAsyncThunk เข้ามา:

sellers/sellersSlice.jsimport { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { client } from '../../api/client'

ตอนนี้เราจะรับข้อมูลผู้ขายจากเซิร์ฟเวอร์ ดังนั้นให้ลบพวกเขาออกจาก initialState โดยเหลือไว้ เพียงวงเล็บว่างเปล่า:

sellers/sellersSlice.jsconst initialState = []

จากนั้นก่อนฟังก์ชัน sellersSlice ให้สร้าง thunk fetchSellers ของเรา เรา จะส่งพาธที่เราระบุไว้บน เซิร์ฟเวอร์ให้กับไคลเอนต์:

sellers/sellersSlice.jsexport const fetchSellers = createAsyncThunk(
  'sellers/fetchSellers',
  async () => {
    const response = await client.get('/fakeServer/sellers')
    return response.data
  }
)

สิ่งที่เราต้องทำเหลือเพียงแค่สร้าง reducer เพิ่มเติม สำหรับ sellersSlice เราจะจำกัดไว้ที่ การจัดการ request ที่สำเร็จเท่านั้น action ทั้งหมด ที่สร้างโดย fetchSellers จะเหมือนกันทุกประการ กับ action ของ fetchProducts:

sellers/sellersSlice.jsconst sellersSlice = createSlice({
  name: 'sellers',
  initialState,
  reducers: {},
  extraReducers(builder) {
    builder.addCase(fetchSellers.fulfilled, (state, action) => {
      return action.payload
    })
  },
})

จำได้ไหมว่าคราวก่อนเมื่อรับข้อมูลสินค้า เราได้เปลี่ยนค่าปัจจุบันของ state ในที่นี้เรา ใช้วิธีการที่แตกต่างออกไปเล็กน้อยและเพียงแค่ ส่งคืนค่าใหม่ ซึ่งใน createSlice ก็สามารถทำได้เช่นกัน ด้วยวิธีนี้เราบรรลุเป้าหมายสองประการ ประการแรก เราได้รับข้อมูล และประการที่สอง ตอนนี้ เรามีการรับประกันว่าในรายชื่อผู้ขายจะไม่ ปรากฏสิ่งอื่นใดเพิ่มเติม เพราะเราได้เขียนทับ slice ทั้งหมด ด้วยค่า action.payload