Redux'ta Thunk ile Veri Gönderme

Önceki derste, sahte sunucumuzda POST isteğinin işlenmesini ele almıştık. Şimdi sunucuya istek gönderecek olan thunk fonksiyonunu yazalım.

Ürün uygulamamızı açalım ve içindeki productsSlice.js dosyasını açalım. Şimdi thunk fetchProducts'tan sonra createAsyncThunk kullanarak addProduct thunk'ını oluşturacağız:

export const addProduct = createAsyncThunk()

createAsyncThunk'a ilk parametre olarak 'products/addProduct', ikinci parametre olarak da yeni ürünün veri nesnesini alacak olan asenkron bir callback fonksiyonu ileteceğiz:

export const addProduct = createAsyncThunk(
	'products/addProduct',
	async (newProduct) => {}
)

Bu callback'in kodunda, istemciyi çağıracağız, kendisine yol ve ürün nesnesini parametre olarak ileteceğiz, ardından yanıt verilerini döndüreceğiz:

export const addProduct = createAsyncThunk(
	'products/addProduct',
	async (newProduct) => {
		const response = await client.post('/fakeServer/products', newProduct)
		return response.data
	}
)

Şimdi aşağıdaki kodda productsSlice için reducers alanına bakalım. Daha önce, içinde reducer ve prepare metodları bulunan productAdded reducer'ını kullanarak yeni bir ürün ekliyorduk. Artık gerekli verileri sunucuda oluşturuyoruz ve thunk ile çalışıyoruz, bu yüzden buradaki productAdded reducer'ını tamamen koddan kaldıralım. Ardından, extraReducers metoduna (kodunun sonuna), başarılı bir istek durumunda products slice'ına yeni bir ürünü doğrudan eylemin payload'ından ekleyecek başka bir ek reducer daha ekleyelim (bu tür bir kodun sadece eşsiz createSlice sayesinde mümkün olduğunu unutmayın):

.addCase(addProduct.fulfilled, (state, action) => {
	state.products.push(action.payload)
})

Evet, bu arada, import satırlarından nanoid'i, dosya sonundaki eylem export'larından da productAdded'ı kaldırmayı unutmayın.

Öğrenci uygulamanızı açın. İçindeki studentsSlice.js dosyasını açın. createAsyncThunk kullanarak, derste gösterildiği gibi sunucuya yeni bir öğrenci eklemek için POST isteği gönderecek başka bir thunk addStudent oluşturun.

Daha sonra aşağıda studentsSlice için değişiklikleri yapın: reducers özelliğindeki studentAdded reducer'ını tamamen kaldırın. extraReducers alanına ise, derste gösterildiği gibi, başarılı bir istek durumunda yeni öğrenciyi students slice'ına eylemin payload'ından ekleyecek ek bir reducer ekleyin.