Redux Toolkit İle HTTP İsteği Atma (createAsyncThunk kullanımı)
Redux Toolkit İle HTTP İsteği Atma (createAsyncThunk kullanımı)

Selamlar!

Normalde React’ta HTPP isteklerini atmak için fetch–catch yapısı veya Axios paketini kullanıyoruz ve normal bir fonksiyon olarak yazıp kullanıyoruz. Ancak Redux Toolkit kullanmaya başlayınca işler birazcık değişiyor. Redux Toolkit’de bulunan createAsyncThunk fonksiyon aracılığı ile yapıyoruz bu işlemi.

Daha önce Fetch ve Axios Kullanımı hakkında bir blog yazısı yazmıştım. Buradan ulaşarak göz atabilirsiniz.
API Nedir, React Fetch ve Axios Kullanımı

Öncelikle kaynak olarak Redux Toolkit dökümanında createAsyncThunk fonksiyonuna bakıyor olacağım. İlgili dökümanı siz de kendiniz için ana rehber olarak kullanabilirsiniz.

Öncelikle createAsyncThunk fonksiyonu ile HTTP istekleri atıp, bunları nasıl yönetebileceğimizi ele alıyoruz. Şimdi kodlama kısmına geçelim.

Burada kullanılan kodlara BURADAN ulaşabilirsiniz.

//redux/usersSlice.jsx

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import axios from "axios";

const initialState = {
  users: [],
  loading: false,
};

export const getAllUsers = createAsyncThunk("users", async () => {
  const response = await axios.get(
    "https://jsonplaceholder.typicode.com/users"
  );
  return response.data;
});

export const usersSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    //You can use here if there isn't HTTP request
  },
  extraReducers: (builder) => {
    //You can use here if there is HTTP request
    builder
      .addCase(getAllUsers.pending, (state) => {
        state.loading = true;
      })
      .addCase(getAllUsers.fulfilled, (state, action) => {
        state.loading = false;
        state.users = action.payload;
      })
      .addCase(getAllUsers.rejected, (state) => {
        state.loading = false;
      });
  },
});

export const {} = usersSlice.actions;
export default usersSlice.reducer;
  1. createAsyncThunk 2 adet parametre alıyor. Birincisi isim, ikincisi fonksiyon olacak şekilde veriyor. axios ile isteğimizi atıyoruz ve veriyi return response.data ile dönüyoruz.
  2. Yukarıdaki yapıda eğer HTTP isteği yapmıyorsak reducer kısmını kullanıyoruz, eğer HTTP isteğimiz var ise bu sefer extraReducers kısmına ekleme yapıyoruz.
  3. usersSlice oluşturup, export ile dışarı açıyoruz.
  4. extraReducers: (builder) kısmından builder üzerinden durumları yönetiyoruz. Bu kısımda builder(getAllUsers.fulfilled, (state, action)) kısmında “getAllUsers” çağrıldığında ve sonuç başarılı olursa (state, action) => {} fonksiyonu çalışıyor.
  5. Peki buradaki state ve action ne anlama geliyor? aşağıda bir görsel var orada anlatılmaya çalışıldı.
  6. Diğer durumlarda da yine state parametre olarak veriliyor ve fonksiyon içinde gerekli durum güncellemelerini yapabiliyoruz. fulfilled olduğunda state.loading = false; ve state.users = action.payload olarak güncelle diyoruz.
  7. export const {} = usersSlice.actions içerisine reducers içerisinde tanımlanan fonksiyonları açıyoruz. getAllUsers o yüzden burada dışarı açılmıyor.
createAstncThunk Kullanımında state ve action
createAstncThunk kullanımında state ve action açıklaması

Şimdi bu oluşturduğumuz usersSlice yapısını store’a bağlamamız gerekiyor.

//redux/store.jsx

import { configureStore } from "@reduxjs/toolkit";
import userReducer from "./usersSlice";

export const store = configureStore({
  reducer: {
    user: userReducer,
  },
});

Şimdi bu fonksiyonu kullanarak tüm kullanıcıları çekebiliriz. Bu işlemi UserList.jsx içerisinden çağıracağız.

//components/UserList.jsx

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getAllUsers } from "../redux/usersSlice";

function UserList() {
  const dispatch = useDispatch();
  const { users, loading } = useSelector((store) => store.user);

  useEffect(() => {
    dispatch(getAllUsers());
  }, []);

  if (loading) {
    return (
      <div id="loading-gif-div">
        <img src="./src/assets/img/loading.gif" alt="loading" />
      </div>
    );
  }

  return (
    <div>
      <h3>ALL USERS</h3>
      <table>
        <thead>
          <tr>
            <th>No</th>
            <th>Username</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Website</th>
          </tr>
        </thead>
        <tbody>
          {users &&
            users.map((user) => (
              <tr key={user.id}>
                <td>{user.id}</td>
                <td>{user.username}</td>
                <td>{user.email}</td>
                <td>{user.phone}</td>
                <td>{user.website}</td>
              </tr>
            ))}
        </tbody>
      </table>
    </div>
  );
}

export default UserList;

Burada kullanılan kodlara BURADAN ulaşabilirsiniz.

Buradan Enes Bayram‘a çok teşekkür ediyorum. Youtube React dersleri gerçekten çok iyi bir kaynak 🙂

Anladığım kadarıyla anlatmaya çalıştım. Umarım faydalı olmuştur. Başka bir blog yazısında görüşmek üzere 🙂

Gönderilere yorum yazabilir veya @huseyineskan instagram hesabımdan benimle iletişime geçebilirsiniz.

Kaynaklar