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

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

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

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

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

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

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

const initialState = []

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

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

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

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

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

เปิดแอปพลิเคชันนักเรียนของคุณ เปิดไฟล์ server.js ในนั้น เพิ่ม handler อีกหนึ่งตัวสำหรับ GET request ของอาจารย์เข้าไปในอาร์เรย์ handlers

ตอนนี้เปิดไฟล์ teachersSlice.js ทำให้ initialState เป็นอาร์เรย์ว่าง ดังที่แสดงในบทเรียน ก่อนฟังก์ชัน studentsSlice ให้เขียน thunk fetchTeachers

ในฟังก์ชัน createSlice ให้เขียน extra reducer เพิ่ม เขียนเฉพาะ การจัดการ request ที่สำเร็จ