Yeni bir sıfırdan ileriye ReactJs konusuna hoş geldiniz. Geçen konumuzda Redux Toolkit'i öğrenerek tek bir yerde değerlerimizi depolayıp gerektiği zaman onları depodan çekip kullanabileceğimizi öğrenmiştik. Eğer bu konuyu tam olarak oturmadıysa lütfen bu konuya geçmeyin çünkü bu konu geçen konunun devamı niteliğinde.
Hatırlarsanız en son kendi değerlerimizi store atıp reducerler içinde kendi fonksiyonlarımızı yapıp kullanmıştık. Bugün ise api isteklerini atmak için kullanacağız. Yani bir yere api istediği attığımız zaman önce veriler store dosyasında depolanacak. Bizler bunu useSelector ile depodan alıp kendi compenentimizde kullanacağız. Normal reducerlerden biraz daha farklı yapacağız bu işlemi o kadar. Dilerseniz konuya geçelim.
Hatırlarsanız en son kendi değerlerimizi store atıp reducerler içinde kendi fonksiyonlarımızı yapıp kullanmıştık. Bugün ise api isteklerini atmak için kullanacağız. Yani bir yere api istediği attığımız zaman önce veriler store dosyasında depolanacak. Bizler bunu useSelector ile depodan alıp kendi compenentimizde kullanacağız. Normal reducerlerden biraz daha farklı yapacağız bu işlemi o kadar. Dilerseniz konuya geçelim.
Redux Toolkit ile Http İstekleri
İlk olarak eğer yapmadıysanız terminal üzerinden redux toolkit paketini indirelim.
Kod:
npm install @reduxjs/toolkit react-reduxBu şekile paketi indirdik. Daha sonra yeni bir dosya açıp adını IstekSlicer.jsx yapalım.
JavaScript:
import {createSlice} from '@reduxjs/toolkit'
const initialState = {
kullanici: [],
loading : false }
export const IstekSlicer = createSlicer({
name : "istek",
initialState,
reducers : {//bu kısım sadece oluşturduğumuz fonksiyonlar için kullanılır. Api istekleri gibi durumda aşağıdaki methodu kullanırız.}
extraReducers : (reducer)=>{}
}
})
export const {//aynı şekil sadece fonkisyonlar kullanırız. İstek gibi durumlarda kullanımaz burası} = IstekSlicer.actions
export default IstekSlicer.reducerTemel yapımız geçen konuyla aynı. Ek olarak extraReducers adlı arkadaş aramıza katıldı. Bu extraReducers içinde istekte bulunurken hata durumu, istek atılırken beklenen durum (yükleme ekranları) ve isteğin başarıyla geri dönmesi sonucu oluşacak durumları belirteceğiz.
Bir sonraki yorum satırında olduğu gibi fonksiyonları export eder gibi etmiyoruz bu istekleri. Zaten denemeye kalkarsanız hata mesajı gelecektir. Ayrıca api çekme işlemi için jsonplaceholder adlı bir api kullanacağım. Çok popülerdir eğitimlerde bunu kullanmak. Şimdi redux toolkit içinde api çekme şekline bakalım bunun için önce axios'u import edelim. Axios'u öğrenmiştik eski konularda ama dilerseniz bunu fetch ile de yapabilirsiniz önemi yok. Axios daha kolayıma geliyor benim o yüzden axios ile yapacağım.
Axios paketini kurmadıysanız kurmanız gerekiyor.
Kod:
npm i axios
Kod:
import {createSlice} from '@reduxjs/toolkit[/COLOR][/CENTER]
[COLOR=rgb(255, 255, 255)][CENTER]import axios from 'axios'
const initialState = {
kullanici: [],
loading : false }
export const kullaniciAl = createAsyncThunk('kullanici',async()=>{
const cevap = await axios.get("https://jsonplaceholder.typicode.com/users");
return cevap.data;
})
export const IstekSlicer = createSlicer({
name : "istek",
initialState,
reducers : {//bu kısım sadece oluşturduğumuz fonksiyonlar için kullanılır. Api istekleri gibi durumda aşağıdaki methodu kullanırız.}
extraReducers : (reducer)=>{}
}
})
export const {//aynı şekil sadece fonkisyonlar kullanırız. İstek gibi durumlarda kullanımaz burası} = IstekSlicer.actions
export default IstekSlicer.reducerAsync-Await ile api çektik. Şimdi bu compenenti store içine koyalım ki verileri tek bir yerden çekelim.
Şimdi bir componente daha oluşturup burada istekleri alalım bu compoenenti ana componente import edelim. Bunun için dispatch adı verilen bir hook kullanırız.
Kod:
[/COLOR][/CENTER]
[COLOR=rgb(255, 255, 255)][CENTER]import React, {useEffect} from 'react'
import {useDispatch} from 'react-redux';
import {kullaniciAl} from './redux/istekSlicer'
function istekAt(){
const dispatch = useDispatch();
useEffect(()=>{
dispatch(kullaniciAl())
},[])
return(
<div> kullaniciListesi</div>
)
}
export defualt kullaniciListesiBu şekilde componente api çağrısında bulunuyoruz. Şu durumda çalışacaktır ama boş bir dizi olarak. Hala extraReducers içindeki işleri henüz bitirmedik. Loading durumunda ne yapması gerektiğini hata durumunda ne yapmasını gerektiğini söylememiz lazım. Şimdi o kısımları doldurmak adına tekrar reducer sayfasına gidiyoruz.
Kod:
import {createSlice} from '@reduxjs/toolkit'[/COLOR][/CENTER][/COLOR][/CENTER]
[COLOR=rgb(255, 255, 255)][CENTER][COLOR=rgb(255, 255, 255)][CENTER]import axios from 'axios'
const initialState = {
kullanicilar[],
loading : false }
export const kullaniciAl = createAsyncThunk('kullanici',async()=>{
const cevap = await axios.get("https://jsonplaceholder.typicode.com/users");
return cevap.data;
export const IstekSlicer = createSlicer({
name : "istek",
initialState,
reducers : {//bu kısım sadece oluşturduğumuz fonksiyonlar için kullanılır. Api istekleri gibi durumda aşağıdaki methodu kullanırız.}
extraReducers : (reducer)=>{
reducer.addCase(kullaniciAl.fullfilled), (state, action) => {
state.kullanicilar = action.payload;
loading: false;
}
reducer.AddCase(kullaniciAl.error),(state,action)=>{
state.kullanicilar = action.payload;
}
reducer.AddCase(kullaniciAl.pending),(state)=>{
loading : true;
}
}
})
export const {//aynı şekil sadece fonkisyonlar kullanırız. İstek gibi durumlarda kullanımaz burası} = IstekSlicer.actions
export default IstekSlicer.reducer
Bu şekilde hata, yüklenme ve başarılı işlemlerde yapılması durumlarını ekledik. Şimdi useSelector ile verileri alıp componentimize yazdıralım.
Kod:
import React, { useEffect } from 'react'[/COLOR][/CENTER][/COLOR][/CENTER]
[COLOR=rgb(255, 255, 255)][CENTER][COLOR=rgb(255, 255, 255)][CENTER]import { useDispatch, useSelector } from 'react-redux';
import { kullaniciAl } from './Redux/IstekSlicer';
function IstekAt() {
const dispatch = useDispatch();
const { kullanici } = useSelector(store => store.istek);
useEffect(() => {
dispatch(kullaniciAl());
}, [dispatch]);
return (
<div>
{kullanici.map((user) => (
<div key={user.id}>
<p>{user.name}</p>
</div>
))}
</div>
);
}
export default IstekAt;
Bu şekilde istediğimiz compenente http isteğe atıp verileri çekeğiz. Şimdi App.jsx dosyasın gelip bu compenenti import edelim.
Ek olarak burada user.id ve user.name kullandık çünkü istek attığımız api bize birçok sonuç dönebilir. Mesela user.email, user.adress gibi verilerde bu verileri teker teker almamız gerekiyor. Ben Burada her idye bir div oluşturup adlarını yazdırmasını belirttim.
Kod:
[/COLOR][/CENTER][/COLOR][/CENTER]
[COLOR=rgb(255, 255, 255)][CENTER][COLOR=rgb(255, 255, 255)][CENTER]mport IstekAt from "./istekAt";
function App() {
return (
<div>
<div>
<IstekAt />
</div>
</div>
)
}
export default App;
Bu şekilde ana compenente import ettik. Şimdi ekranda bizi bekleyen sonuca bakalım.
Görüldüğü üzere verileri kolayca ekranda görüyouz. Bu yöntem ile çok daha rahat ve moduler bir şekilde api istekleri atarak projenizi gelişterebilirsiniz. Çok güzel pratik yapmalık apiler var google books olsun, nasa api olsun, vs. Bunlarla çalışarak kendinizi bu konuda pekiştirebilirsiniz. Okuduğunuz için teşekkür ederim bir başka konuda görüşmek üzere.
