React | Redux-Toolkit AsyncThunk ile Api Kullanımı

Redux-Toolkit ile API(Application Programming Interface) işlemleri Async(Asenkron) bir şekilde nasıl yapılır inceleyelim

Async nedir ? Async programlama, uzun bir işin bitmesini beklemeden bu işin sonucuna bağımlı olmayan diğer işlemlere devam edebilmektir. Mesela süreç alabilecek bir işlem geldi(…Fetch Api gibi) bu işlem farklı bir thread’e alınarak yapılır böylelikle diğer işlemler bloklanmadan devam edebilme imkanı sağlanır.

Thunk nedir ? Thunk saf olmayan fonksiyonları , saf redux actionlarımızla birlikte çalışmasına olanak sağlayan middleware’dir.Redux reducer’ların her zaman saf bir şekilde olması uygulamamızın sağlıklı çalışabilmesi için gereklidir.

Saf fonksiyon , aynı girdilere aynı çıktıyı döndüren fonksiyondur.

Saf Fonksiyon

Async ve thunk kavramını öğrendiğimize göre AsyncThunk kullanılarak nasıl redux-api veri çekme işlemi yapılır gelin , kodlayalım.

İlk olarak react projemizi oluşturalım :

npm install create-react-app redux-api

Gerekli paketlerimizi kuralım :

# NPM
npm install @reduxjs/toolkit
npm install react-redux
# AXIOS
// Veri çekme işlemi için axios tercih ediyorum
npm install axios

Uygulamamızı oluşturduk paketlerimizi kurduk.Redux işlemleri için store klasörü oluşturalım

Store Klasörü

Evet gelelim şimdi işin en eğlenceli kısmı , kodlamaya :)

Store.js dosyamızda configureStore ile store sabitimizi oluşturup export edelim,şimdilik reducer boş kalsın.

store.js

index.js dosyamızın içerisinde <App /> componenti Provider ile saralım ve export ettiğimiz store sabitini çağıralım böylelikle reducera erişim sağlamış oluruz.

index.js

apiSlice.js :

apiSlice.js

fetchData sabitimizi createAsyncThunk ile oluşturduk, createAsyncThunk fonksiyonumuza ilk parametre olarak isim verdik diğer parametresi ise bize async bir cevap döndürecek işte burada api işlemleri gerçekleştirilir . Async işlemler extraReducers içerisinde çağırılır. createAsyncThunk fulfilled(tamamlandığında ,yerine getirildiğinde) state içerisindeki data dizimize gelen verileri aktardık.

Böylelikle redux ile api işlemlerini createAsyncThunk sayesinde farklı bir thread ‘de yapmış olduk.Hem diğer işlemler bloklanmamış olur hem de saf redux-actionlar ile birlikte çalışabilir hale gelmiş olur.

Store.js içerisine export ettiğimiz apiSlice reducer işlevini koyalım reducerlara erişim sağlayabilmek için.

store.js

App.js içerisinde fetchData sabitini useEffect içerinde çağıralım böylelikle API-Veri çekme işlemi gerçekleştirilir.

App.js

User component’i oluşturup , redux state içerisindeki data dizisini bu component’e çekebiliriz.

Çıktımız :

Evet , tüm işlemler bu kadardı redux içerisinde api işlemlerini bu şekilde yapabiliriz . Ben sadece https://randomuser.me/api/?results=3 arayüzden gelen isim,soyisim,kullanıcı adi ve ülke verilerini ekrana yazdım.

Projeye buradan erişebilirsiniz : https://github.com/erendeveci/redux-api

Bu yazının referansları :

Redux Toolkit | Redux Toolkit

React + Redux Toolkit - Fetch Data in Async Action with createAsyncThunk

Umarım faydalı bir yazı olmuştur. Eksik veya yanlış olduğunu düşündüğünüz kısımları bana iletirseniz çok sevinirim

İletişim : LinkedIn