Redux'ta Thunks'a Giriş

Önceki bölümde, veri alışverişi için sunucunun, veritabanının ve istemcinin çalışmasını düzenledik. Şimdi, 'senkronize' düzenlenmiş Redux uygulamamızın, bir önceki bölümün son dersinde oluşturduğumuz asenkron istemci ile etkileşime girmesine, istek göndermesine ve yanıt olarak gerekli verileri almasına yardımcı olacak son köprüyü kurmalıyız.

Önceki bölümün ilk derslerinden hatırladığımız gibi, Redux asenkron mantıkla çalışma hakkında bir şey bilmez ve bunun için thunk middleware kullanacağız. Bu middleware, gönderilen action'lar ile çalışmamıza, thunk kodumuzda store'un dispatch ve getState metodlarını kullanmamıza ve ayrıca dispatch metodunun sadece sıradan JS nesneleriyle değil, fonksiyonlar ve promise'ler gibi varlıklarla da çalışmasına yardımcı olur.

Genellikle thunk fonksiyonu, gövdesinde kullanılabilecek iki argüman dispatch ve getState (gerekirse) ile çağrılır. Onunla sıradan action'lar gönderilebilir. Ayrıca store.dispatch üzerinden de gönderilebilir. Böyle bir fonksiyonun örneği aşağıda verilmiştir:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`Eski Renk: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`Yeni Renk: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

Şimdi ürün uygulamamızı açalım. Uygulama başlatıldığında sunucudan almamız gereken ilk şey ürün listesidir. Genellikle thunk'lar slice dosyalarında yazıldığı için, productsSlice.js dosyasını açacağız.

Sevindirici haber şu ki, Redux Thunk'ı kurma derdiyle uğraşmamıza gerek yok, çünkü RTK'dan configureStore fonksiyonu bunu zaten bizim için halledecek. Bu yüzden sadece dosyadaki import'a createAsyncThunk ekleyelim:

import { createSlice, nanoid, createAsyncThunk } from '@reduxjs/toolkit'

Ayrıca istemcimizi de import edelim:

import { client } from '../../api/client'

Ve şimdi createAsyncThunk yardımıyla ürünleri getirmek için ilk thunk'ımızı oluşturalım, bunu initialState nesnesinin tanımından hemen sonra yapalım:

export const fetchProducts = createAsyncThunk()

createAsyncThunk ilk parametre olarak oluşturulacak action'ın türü için bir string, ikinci parametre olarak da payload için sonuçta ya veri döndürecek ya da hata ile bir promise döndürecek (client.js dosyasına bakın) bir callback fonksiyonu kabul edecek. Fonksiyon kodunda, client.get çağrısı yapıp sunucuda belirttiğimiz yolu (server.js dosyasındaki http.get aldığı parametrelere bakın) iletiyoruz:

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

Öğrenci uygulamanızı açın. İçindeki studentsSlice.js dosyasını açın. Thunk oluşturmak için createAsyncThunk fonksiyonunu ve sunucuya API istekleri göndermek için client'ı import edin.

initialState nesnesinin tanımından hemen sonra, server.js dosyanızda belirtilen /fakeServer/students adresine GET isteği gönderecek ve ders materyallerinde gösterildiği gibi response.data döndürecek olan fetchStudents thunk'ını oluşturmak için createAsyncThunk kullanın. createAsyncThunk için ilk parametre olarak action türü için students/fetchStudents string'ini belirtin.