Redux'ta Satıcı Verilerinin Alınması

Hadi uygulamamızı ürünlerle başlatalım. Ürün kartlarında satıcıların gösterilmediğini görüyoruz. Hadi onları sunucudan alalım ve bu verileri gösterelim. Bunun için zaten aşina olduğumuz işlem dizisini gerçekleştirmemiz gerekecek.

Başlangıç olarak server.js dosyasını açalım. handlers dizisini bulup içine bir tane daha GET isteği işlemi ekleyelim (ürünler için GET işleminden sonra). Gördüğünüz gibi neredeyse aynı:

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

Sunucudaki isteği işledik. Bir sonraki aşamada, sellersSlice.js dosyasında sunucudan veri almak için bir thunk yazmamız gerekiyor. Bunun için içine client ve createAsyncThunk'ı import edelim:

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

Artık satıcıları sunucudan alacağımız için, onları initialState'den kaldıralım, sadece boş köşeli parantezler bırakalım:

const initialState = []

Sonrasında, sellersSlice fonksiyonundan önce thunk'ımızı fetchSellers oluşturalım. İstemciye sunucuda belirttiğimiz yolu vereceğiz:

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

Sadece sellersSlice için ekstra bir reducer oluşturmamız kaldı. Burada başarılı isteğin işlenmesiyle sınırlı kalalım. fetchSellers tarafından oluşturulan tüm action'lar, fetchProducts'ın action'larıyla aynı olacak:

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

Hatırlatayım, geçen sefer ürünleri alırken mevcut state değerini değiştirmiştik. Burada biraz farklı bir yol kullanarak sadece yeni bir değer döndürdük, createSlice içinde de bu mümkün. Böylece iki amaca ulaştık. İlk olarak, verileri aldık, ikinci olarak da, artık slice'ı tamamen action.payload değeriyle yeniden yazdığımız için, satıcı listesine başka bir şeyin eklenmeyeceği garantisi var.

Öğrenci uygulamanızı açın. İçinde server.js dosyasını açın, handlers dizisine öğretmenler için bir tane daha GET isteği işleyici ekleyin.

Şimdi teachersSlice.js dosyasını açın. initialState'yi derste gösterildiği gibi boş bir dizi yapın. studentsSlice fonksiyonundan önce fetchTeachers thunk'ını yazın.

createSlice fonksiyonuna ekstra reducer'ı ekleyin, başarılı isteğin işlenmesiyle sınırlı kalın.