React Tutorial 2023 62 – API İşlemleri 6 - Fetch API Get İsteği - Loading State Yönetimi

Önemli: Diğer yazılarımla direkt bağlantılı bir yazıdır. İlk olarak bu yazıdan okumaya başladıysanız, eğitim serisine kısaca bir göz atmanızı tavsiye ederim.

Merhabalar.

Get isteği ile işlemlerimize devam ediyoruz.

Load Post butonuna basınca, API’a istek atıyorduk ve blog postlarımız geliyor ve ekranda gösteriyorduk. Çoğu zaman API’a istek attığımızda, isteğimizin tamamlanması biraz zaman alabilir. Bu zaman zarfında, ekranda kullanıcıya istekle alakalı bir işlem olduğunu göstermek iyi bir UX geliştirmesidir.

Şimdi uygulamamıza bunu ekleyeceğiz.

Bunu bir isLoading state ile gerçekleştireceğiz. Liste ögelerinin geleceği yere işlem sırasında Loading yazacağız ya da bir Loading gif koyacağız.

Bir de şunu kontrol edelim, eğer isteğimiz boş dönerse post olmadığı bildirimini gösterelim. Bunu da isData state’i ile kontrol edelim.

Bu bildirimi gösterirken bir loading.gif ile yapalım istiyorum. Bunun için src klasörü içine Assets onun içine Images klasörü oluşturacağız. Buraya aşağıda verdiğim gif koyalım.

BlogPost.jsx Kodları

import React, { useState } from 'react'
import './BlogPost.css'
import loadingGif from "../../Assets/Images/loading.gif"

const BlogPost = () => {
    const [posts, setPosts] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
    const [isData, setIsData] = useState(false);

    const loadPosts = async () => {

        try {

            setIsLoading(true);

            const response = await fetch('https://jsonplaceholder.typicode.com/posts');

            const data = await response.json();

            setPosts(data);

            setIsLoading(false);

            if (data.length === 0 ? setIsData(false) : setIsData(true));

        } catch (error) {

            console.error('There was an error!', error);

        }
    };

    return (
        <div className="blogPost">
            <button onClick={loadPosts}>Load Posts</button>

            {isLoading &&
                <div className="center">
                    <img src={loadingGif} width={100} alt="Loading" />
                </div>
            }
            {!isData &&

                <div className="center">
                    <h3>There is no data</h3>
                </div>
            }


            {posts.map((post) => (
                <div key={post.id} className="post">
                    <h2>{post.title}</h2>
                    <p>{post.body}</p>
                </div>
            ))}
        </div>
    );
}

export default BlogPost

BlogPost.css Güncel Hali

.blogPost {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .post {
    width: 60%;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    margin: 20px 0;
  }
  
  button {
    padding: 10px 20px;
    margin: 20px 0;
    border: none;
    border-radius: 5px;
    background-color: #007BFF;
    color: white;
    cursor: pointer;
  }

  .center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

Kodlarımızı Adım Adım İnceleyelim

loading.gif’i import ediyorum.

import loadingGif from "../../Assets/Images/loading.gif"

isLoading ve isData state’lerini oluşturduk. Başlangıç değerleri false olarak ayarladım.

const [isLoading, setIsLoading] = useState(false);
const [isData, setIsData] = useState(false);

Jsx Güncelle

{isLoading &&
  <div className="center">
      <img src={loadingGif} width={100} alt="Loading" />
  </div>
}

{!isData &&

<div className="center">
     <h3>There is no data</h3>
</div>

}

isLoading değeri true olursa ekranda Loading gifi görünecektir.

isData’nın değili ile de eğer data yoksa ekranda data yok gözükecek.

const loadPosts = async () => {

        try {
            setIsLoading(true);
            const response = await fetch('https://jsonplaceholder.typicode.com/posts');

            const data = await response.json();

            setPosts(data);

            setIsLoading(false);

            if (data.length === 0 ? setIsData(false) : setIsData(true));

        } catch (error) {

            console.error('There was an error!', error);

        }
    };

loadPosts çağırıldığında API isteği başlayacağı için isLoading state’ini true olacak güncelliyoruz. Böyle yapınca ekranda gif dönmeye başlıyor. İsteğin işi bittiğinde isLoading state’ini false’a çekiyoruz.

Sonraki adımda, data’nın var olup olmadığını sorguluyoruz bu duruma göre isData state’ini güncelliyoruz.