Mendapatkan Data Penjual dalam Redux

Mari lancarkan aplikasi produk kita. Kita dapat lihat bahawa dalam kad produk penjual tidak dipaparkan. Mari dapatkan data mereka dari pelayan dan paparkan data ini. Untuk ini kita perlu melaksanakan urutan tindakan yang sudah biasa.

Pertama, buka fail server.js. Cari tatasusunan handlers dan tambah satu lagi pemprosesan permintaan GET (selepas pemprosesan GET untuk produk). Seperti yang anda lihat, ia hampir sama:

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

Kami telah memproses permintaan di pelayan. Peringkat seterusnya ialah dalam fail sellersSlice.js kita perlu menulis thunk untuk mendapatkan data dari pelayan. Untuk itu, import client dan createAsyncThunk ke dalamnya:

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

Sekarang kita akan mendapatkan penjual dari pelayan, jadi kita akan keluarkan mereka dari initialState, tinggalkan hanya kurungan kosong:

const initialState = []

Kemudian sebelum fungsi sellersSlice buat thunk kami fetchSellers. Kami akan hantar laluan yang ditentukan oleh kami di pelayan kepada klien:

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

Kita hanya perlu mencipta satu lagi reducer untuk sellersSlice. Kita akan hadkan diri kepada pemprosesan permintaan yang berjaya. Semua tindakan yang dijana oleh fetchSellers akan sama dengan tindakan fetchProducts:

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

Ingatkan, kali sebelumnya apabila mendapatkan produk kami mengubah nilai keadaan semasa. Di sini kami menggunakan cara yang sedikit berbeza dan hanya mengembalikan nilai baru, kerana dalam createSlice ia juga boleh dilakukan. Dengan itu kami mencapai dua matlamat. Pertama, kami mendapat data, dan kedua, sekarang kami mempunyai jaminan bahawa dalam senarai penjual tidak akan muncul sesuatu yang lain, kerana kami sepenuhnya menggantikan slice dengan nilai action.payload.

Buka aplikasi pelajar anda. Buka fail server.js di dalamnya, tambahkan satu lagi pengendali untuk permintaan GET pensyarah ke dalam tatasusunan handlers.

Sekarang buka fail teachersSlice.js. Jadikan initialState sebagai tatasusunan kosong, seperti yang ditunjukkan dalam pelajaran. Sebelum fungsi studentsSlice tulis thunk fetchTeachers.

Dalam fungsi createSlice, tambah reducer tambahan, hadkan kepada pemprosesan permintaan yang berjaya.