Mendapatkan Data Penjual di Redux

Mari jalankan aplikasi kita dengan produk. Kita melihat bahwa di kartu produk penjual tidak ditampilkan. Mari kita dapatkan dari server dan tampilkan data tersebut. Untuk ini kita harus melakukan urutan tindakan yang sudah dikenal.

Pertama, buka file server.js. Temukan array handlers dan tambahkan satu lagi penanganan permintaan GET (setelah penanganan GET untuk produk). Seperti yang Anda lihat, ini hampir identik:

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

Kita telah menangani permintaan di server. Tahap berikutnya adalah di file sellersSlice.js kita harus menulis thunk untuk mendapatkan data dari server. Untuk itu, impor client dan createAsyncThunk ke dalamnya:

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

Sekarang kita akan mendapatkan penjual dari server, oleh karena itu hapus mereka dari initialState, biarkan hanya tanda kurung kosong:

const initialState = []

Kemudian sebelum fungsi sellersSlice buat thunk kita fetchSellers. Ke client kita berikan path yang telah kita tentukan di server:

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

Kita hanya perlu membuat reducer tambahan untuk sellersSlice. Mari batasi diri kita di sini pada penanganan permintaan yang berhasil. Semua aksi yang dihasilkan oleh fetchSellers akan identik dengan aksi fetchProducts:

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

Ingat, bahwa sebelumnya saat mendapatkan produk kita mengubah nilai state saat ini. Di sini kita menggunakan cara yang sedikit berbeda dan hanya mengembalikan nilai baru, karena di createSlice itu juga bisa dilakukan. Dengan demikian kita mencapai dua tujuan. Pertama, kita mendapatkan data, dan kedua, sekarang kita memiliki jaminan bahwa dalam daftar penjual tidak akan muncul sesuatu yang lain, karena kita sepenuhnya menggantikan slice dengan nilai action.payload.

Buka aplikasi Anda dengan para siswa. Buka file server.js di dalamnya, tambahkan satu lagi penangan untuk permintaan GET pengajar ke array handlers.

Dan sekarang buka file teachersSlice.js. Buat initialState menjadi array kosong, seperti yang ditunjukkan dalam pelajaran. Sebelum fungsi studentsSlice tulis thunk fetchTeachers.

Dalam fungsi createSlice tambahkan reducer tambahan, batasi diri pada penanganan permintaan yang berhasil.