ReactJS এ API Integration

ReactJS-এ API Integration হল বাহ্যিক বা সার্ভার-সাইড ডেটার সাথে যোগাযোগ স্থাপন এবং সেই ডেটা React অ্যাপ্লিকেশনে ব্যবহার করার প্রক্রিয়া। সাধারণত, React অ্যাপ্লিকেশন ফ্রন্ট-এন্ড হিসেবে কাজ করে, যেখানে UI রেন্ডারিংয়ের জন্য ডেটা পেতে API কল করা হয়। API ইন্টিগ্রেশনের জন্য সাধারণত fetch API বা তৃতীয় পক্ষের লাইব্রেরি যেমন Axios ব্যবহার করা হয়।

API Integration এর জন্য প্রয়োজনীয় ধাপ

ReactJS-এ API ইন্টিগ্রেশন করার জন্য আপনাকে কিছু মূল পদক্ষেপ অনুসরণ করতে হবে:

1. API কল করা
2. প্রাপ্ত ডেটা প্রসেস করা
3. State আপডেট করা
4. UI রেন্ডার করা

১. API কল করা

React-এ API কল করার জন্য দুটি প্রধান উপায় হল:

• fetch API (বিল্ট-ইন ব্রাউজার API)
• Axios (একটি পপুলার থার্ড-পার্টি লাইব্রেরি)

Fetch API ব্যবহার করে API কল

fetch() হল একটি বিল্ট-ইন JavaScript API যা Promise-based এবং HTTP রিকোয়েস্ট পাঠাতে ব্যবহৃত হয়। এটি GET, POST, PUT, DELETE ইত্যাদি HTTP মেথড ব্যবহার করতে পারে।

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // API কল করার জন্য useEffect হুক ব্যবহার করা
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts') // API URL
      .then(response => response.json()) // JSON ডেটা পার্স করা
      .then(data => {
        setData(data); // ডেটা স্টেটে সেট করা
        setLoading(false); // লোডিং বন্ধ করা
      })
      .catch(err => {
        setError(err); // যদি কোনো ত্রুটি ঘটে তবে তা হ্যান্ডেল করা
        setLoading(false); // লোডিং বন্ধ করা
      });
  }, []); // [] দ্বারা ডিফাইন করা হয়েছে যে এই কোডটি একবারই চালানো হবে কম্পোনেন্ট লোড হওয়ার সময়

  // UI রেন্ডারিং
  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <h1>API Data</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

এখানে, আমরা fetch() ব্যবহার করে একটি API কল করেছি এবং রিটার্ন হওয়া JSON ডেটা setData() মাধ্যমে React কম্পোনেন্টের স্টেটে সেট করেছি। যখন ডেটা লোড হয়, UI আপডেট হবে।

Axios ব্যবহার করে API কল

Axios একটি জনপ্রিয় JavaScript লাইব্রেরি যা HTTP রিকোয়েস্ট এবং রেসপন্সের জন্য একটি আরও সুবিধাজনক API সরবরাহ করে।

প্রথমে, Axios ইনস্টল করতে হবে:

npm install axios

তারপর, Axios ব্যবহার করা যেতে পারে:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts') // API কল
      .then(response => {
        setData(response.data); // ডেটা স্টেটে সেট করা
        setLoading(false); // লোডিং বন্ধ করা
      })
      .catch(err => {
        setError(err); // ত্রুটি হলে সেট করা
        setLoading(false); // লোডিং বন্ধ করা
      });
  }, []); // কম্পোনেন্ট লোড হওয়ার সময় একবারই রান হবে

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <h1>API Data</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Axios ব্যবহার করার সময়, axios.get() ব্যবহার করে API থেকে ডেটা ফেচ করা হয় এবং রেসপন্সের ডেটা সরাসরি response.data থেকে পাওয়া যায়।

২. API থেকে ডেটা প্রসেস করা

যখন API থেকে ডেটা আসে, তখন তা JSON ফরম্যাটে থাকে। React-এ সেই ডেটা স্টেটে সংরক্ষণ করে UI তে রেন্ডার করা হয়। এই ডেটা প্রসেস করতে আপনি map() ফাংশন ব্যবহার করতে পারেন, যেমন উপরে দেখানো হয়েছে, যেখানে ডেটা প্রতিটি আইটেমের জন্য একটি <li> ট্যাগে রেন্ডার করা হয়।

৩. State আপডেট করা

React-এ useState হুক ব্যবহার করে API থেকে প্রাপ্ত ডেটাকে স্টেটে সেট করা হয়। যখন স্টেট আপডেট হয়, React স্বয়ংক্রিয়ভাবে UI রেন্ডার করে নতুন ডেটার সাথে।

৪. UI রেন্ডার করা

React-এ API থেকে ডেটা আসার পর, সেই ডেটা ব্যবহার করে UI রেন্ডার করা হয়। উদাহরণস্বরূপ, একটি লোডিং স্টেট দেখানো হয় যতক্ষণ না API থেকে ডেটা আসে, এবং যদি কোনো ত্রুটি ঘটে, তা ইউজারকে দেখানো হয়।

উপসংহার

ReactJS-এ API Integration অত্যন্ত সহজ এবং প্রভাবশালী, যেখানে fetch() বা Axios ব্যবহার করে বাহ্যিক ডেটা সহজে React অ্যাপ্লিকেশনে এক্সেস করা যায়। State এবং Effect হুক ব্যবহার করে ডেটা ফেচিং এবং রেন্ডারিং এর প্রক্রিয়া সম্পন্ন করা হয়, যা React অ্যাপ্লিকেশনকে ডায়নামিক এবং রিয়েলটাইম তথ্য প্রদানে সক্ষম করে।

API কী?

API (Application Programming Interface) হল একটি সফটওয়্যার উপাদানের এক অংশ যা দুটি সিস্টেম বা প্রোগ্রামকে একে অপরের সাথে যোগাযোগ করতে এবং ডাটা বা ফিচার শেয়ার করতে সাহায্য করে। ReactJS অ্যাপ্লিকেশনগুলিতে, API সাধারণত একটি সার্ভার বা ডাটাবেস থেকে ডাটা নিয়ে আসার জন্য ব্যবহৃত হয়, যা অ্যাপ্লিকেশনের UI তে প্রদর্শিত হয়।

API ব্যবহার করে আপনি ওয়েব সার্ভার থেকে ডাটা ফেচ করতে পারেন (যেমন JSON ফরম্যাটে), যা পরে React কম্পোনেন্টে রেন্ডার করা হয়। React অ্যাপ্লিকেশন সাধারণত RESTful API অথবা GraphQL API ব্যবহার করে ডাটা আদান-প্রদান করে থাকে।

ReactJS এ API কিভাবে কাজ করে?

ReactJS-এ API এর সাথে কাজ করার জন্য, সাধারণত HTTP requests পাঠানোর জন্য fetch() বা তৃতীয় পক্ষের লাইব্রেরি যেমন Axios ব্যবহার করা হয়। যখন আপনি API থেকে ডাটা ফেচ করেন, তখন সেটি asynchronous process হয়, এবং React এর useEffect() হুক ব্যবহার করে আপনি এই API কল করতে পারেন এবং ডাটা লোড হওয়া পর্যন্ত UI আপডেট করতে পারেন।

ReactJS এ API থেকে ডাটা ফেচ করার জন্য প্রক্রিয়া

১. Fetch API ব্যবহার করা

Fetch API হল একটি ব্রাউজারের বিল্ট-ইন API যা আপনি HTTP requests পাঠানোর জন্য ব্যবহার করতে পারেন। এটি Promise ভিত্তিক, অর্থাৎ, asynchronous প্রক্রিয়ায় কাজ করে।

উদাহরণ: fetch() ব্যবহার করে API থেকে ডাটা ফেচ করা

import React, { useState, useEffect } from 'react';

function DataFetching() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data') // API URL
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json(); // JSON এ রূপান্তর
      })
      .then(data => {
        setData(data); // API ডাটা স্টেটে সেট করা
        setLoading(false); // লোডিং শেষ
      })
      .catch(error => {
        setError(error); // ত্রুটি হ্যান্ডলিং
        setLoading(false);
      });
  }, []); // empty array অর্থাৎ componentDidMount এর মতো কাজ করবে

  if (loading) return <h2>Loading...</h2>;
  if (error) return <h2>{error.message}</h2>;

  return (
    <div>
      <h1>Fetched Data</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default DataFetching;

ব্যাখ্যা:

• useState(): React এর স্টেট ব্যবহৃত হয়েছে ডাটা, লোডিং স্টেট এবং ত্রুটি স্টেট সংরক্ষণ করার জন্য।
• useEffect(): useEffect হুকটি API কল করার জন্য ব্যবহৃত হয়েছে, যা কম্পোনেন্টটি প্রথমবার রেন্ডার হওয়ার পর একবার চালিত হবে (এখানে [] ডিপেনডেন্সি অ্যারে ব্যবহার করা হয়েছে, যাতে এটি শুধু একবার রান করে)।
• fetch(): এটি API URL-এ GET রিকোয়েস্ট পাঠায় এবং প্রতিক্রিয়া JSON ফরম্যাটে রিসিভ করে।
• then() এবং catch(): এগুলি প্রমিসের মাধ্যমে সফলভাবে API রেসপন্স বা ত্রুটির জন্য কন্ট্রোল পরিচালনা করে।

২. Axios ব্যবহার করা

Axios হল একটি পপুলার লাইব্রেরি যা HTTP রিকোয়েস্ট পাঠানোর জন্য ব্যবহৃত হয়। এটি সহজ API এবং Promise ভিত্তিক, এবং ব্রাউজার এবং Node.js উভয় ক্ষেত্রেই কাজ করে। fetch() এর তুলনায় Axios কিছু সুবিধা প্রদান করে, যেমন অটোমেটিক JSON রূপান্তর এবং ত্রুটি হ্যান্ডলিং এর উন্নত সমাধান।

উদাহরণ: Axios ব্যবহার করে API থেকে ডাটা ফেচ করা

প্রথমে Axios ইনস্টল করতে হবে:

npm install axios

এখন React অ্যাপে Axios ব্যবহার করা:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function DataFetching() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios.get('https://api.example.com/data') // API URL
      .then(response => {
        setData(response.data); // ডাটা প্রাপ্তি
        setLoading(false); // লোডিং সম্পন্ন
      })
      .catch(error => {
        setError(error); // ত্রুটি হ্যান্ডলিং
        setLoading(false);
      });
  }, []); // empty dependency array

  if (loading) return <h2>Loading...</h2>;
  if (error) return <h2>{error.message}</h2>;

  return (
    <div>
      <h1>Fetched Data</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default DataFetching;

ব্যাখ্যা:

• axios.get(): Axios এর get() মেথডটি API থেকে ডাটা ফেচ করতে ব্যবহৃত হয়েছে।
• then() এবং catch(): এখানে then() ডাটা সফলভাবে প্রাপ্ত হলে এবং catch() ত্রুটি প্রাপ্ত হলে ব্যবহার করা হয়েছে।

ReactJS এ API ব্যবহার করার সুবিধা

1. ডাটা সেন্ট্রিক অ্যাপ্লিকেশন: ReactJS API ব্যবহার করে ডাইনামিক ডাটা রেন্ডার করতে সহায়তা করে, যেমন ইউজারের ইনপুট অনুসারে ডাটা ফেচ করা, সার্চ রেজাল্ট প্রদর্শন, বা ডাটাবেস থেকে তথ্য প্রদর্শন।
2. বহু ফিচার অ্যাপ্লিকেশন: একাধিক API ব্যবহার করে একটি অ্যাপ্লিকেশনে বিভিন্ন ফিচার যুক্ত করা যায়, যেমন ইউজার অথেন্টিকেশন, পেমেন্ট গেটওয়ে, প্রোডাক্ট ইনভেন্টরি সিস্টেম ইত্যাদি।
3. পৃথক ফ্রন্ট-এন্ড এবং ব্যাক-এন্ড: React অ্যাপ্লিকেশন ফ্রন্ট-এন্ড হিসেবে কাজ করতে পারে এবং API সার্ভিস ব্যাক-এন্ডে থাকে, যা ডাটা হ্যান্ডলিং এবং প্রক্রিয়াকরণ করে।

ReactJS অ্যাপ্লিকেশনে API ব্যবহারের মাধ্যমে আপনি ডাটা ফেচিং, সাবমিশন এবং অন্যান্য ক্রিয়াকলাপ সহজে সম্পন্ন করতে পারেন। API কলিং প্রক্রিয়াটি খুবই গুরুত্বপূর্ণ, বিশেষত যখন আপনি ওয়েব অ্যাপ্লিকেশন তৈরি করছেন যা ডাইনামিক ডাটা ডিসপ্লে করতে চায়।

ReactJS-এ API কল করা একটি সাধারণ কার্যকারিতা যা ডেটা সার্ভার থেকে নিয়ে কম্পোনেন্টে প্রদর্শন করতে ব্যবহৃত হয়। React-এ API কল করার জন্য দুটি জনপ্রিয় পদ্ধতি রয়েছে: Fetch API এবং Axios। উভয় পদ্ধতিই HTTP রিকোয়েস্ট পাঠাতে ব্যবহৃত হয়, তবে Axios কিছু অতিরিক্ত সুবিধা প্রদান করে।

১. Fetch API ব্যবহার করে API কল করা

ReactJS-এ fetch() ফাংশনটি একটি ব্রাউজার-বিল্ট ইন মেথড যা HTTP রিকোয়েস্ট পাঠাতে ব্যবহৃত হয়। এটি Promise রিটার্ন করে এবং সাধারণত then() এবং catch() মেথডের মাধ্যমে রেসপন্স হ্যান্ডেল করা হয়।

Fetch API ব্যবহার করার উদাহরণ:

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Fetch API কল করা
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((data) => {
        setData(data); // ডেটা সেট করা
        setLoading(false); // লোডিং স্টেট false করা
      })
      .catch((error) => {
        console.error('Error fetching data: ', error);
        setLoading(false); // যদি কোনো ত্রুটি হয়, তাহলে লোডিং false হবে
      });
  }, []); // empty dependency array মানে এই কোডটি প্রথম render এ একবার চালানো হবে

  if (loading) {
    return <h2>Loading...</h2>;
  }

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

এখানে, fetch() দিয়ে API কল করা হয়েছে এবং ডেটা পাওয়ার পর setData() দিয়ে স্টেট আপডেট করা হয়েছে। যদি API কল সফলভাবে সম্পন্ন হয়, তবে সেই ডেটা data স্টেটে রাখে এবং লোডিং স্টেটটি false সেট করে। যদি কোনো ত্রুটি ঘটে, তা হলে কনসোলে ত্রুটি মেসেজ দেখা যাবে।

২. Axios ব্যবহার করে API Call করা

Axios একটি জনপ্রিয় JavaScript লাইব্রেরি যা API কল করার জন্য ব্যবহার করা হয়। এটি fetch() এর তুলনায় কিছু অতিরিক্ত সুবিধা প্রদান করে, যেমন:

• Request এবং Response ইন্টারসেপ্টর
• Promise ভিত্তিক API
• JSON ডেটা অটোমেটিকভাবে পার্স করা
• Error হ্যান্ডলিং এবং কাস্টম হেডার সেট করা

Axios ইনস্টলেশন:

Axios ব্যবহার করতে প্রথমে এটি ইনস্টল করতে হবে। NPM বা Yarn ব্যবহার করে এটি ইনস্টল করা যেতে পারে:

npm install axios

অথবা:

yarn add axios

Axios ব্যবহার করার উদাহরণ:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Axios API কল করা
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        setData(response.data); // ডেটা সেট করা
        setLoading(false); // লোডিং false করা
      })
      .catch((error) => {
        console.error('Error fetching data: ', error);
        setLoading(false); // ত্রুটি হলে লোডিং false করা
      });
  }, []); // empty dependency array

  if (loading) {
    return <h2>Loading...</h2>;
  }

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

এখানে, Axios এর axios.get() মেথড ব্যবহার করা হয়েছে API থেকে ডেটা ফেচ করার জন্য। Axios স্বয়ংক্রিয়ভাবে রেসপন্সের ডেটা response.data প্রপার্টিতে প্রদান করে, যা তারপর স্টেটে সেট করা হয়। এর পাশাপাশি, যদি কোনো ত্রুটি ঘটে, তা হলে catch() ব্লকে error হ্যান্ডলিং করা হয়।

Fetch এবং Axios এর মধ্যে পার্থক্য

সারাংশ

ReactJS-এ API কল করতে fetch() এবং Axios উভয়ই ব্যবহৃত হয়, তবে Axios কিছু অতিরিক্ত সুবিধা এবং সহজ কনফিগারেশন প্রদান করে। ছোট প্রোজেক্টে fetch() ব্যবহার করা যেতে পারে, তবে বড় এবং জটিল অ্যাপ্লিকেশনের জন্য Axios অধিক সুবিধাজনক।

ReactJS-এ useEffect হুকটি কম্পোনেন্টের সাইড এফেক্টস পরিচালনা করার জন্য ব্যবহৃত হয়। API কল করা বা ডেটা ফেচ করা এমন একটি সাইড এফেক্ট যা সাধারণত useEffect হুকের মাধ্যমে করা হয়। useEffect হুকের সাহায্যে আপনি API কল করতে পারেন এবং সেই ডেটা আসার পর UI আপডেট করতে পারেন।

এই টিউটোরিয়ালে, আমরা দেখব কিভাবে useEffect হুকটি ব্যবহার করে API কল করা যায় এবং সেই ডেটা কম্পোনেন্টে রেন্ডার করা যায়।

useEffect হুক এবং API কল

useEffect হুকটি একটি ফাংশন হিসেবে কাজ করে, যেটি কম্পোনেন্ট রেন্ডার হওয়ার পর একটি নির্দিষ্ট কাজ বা সাইড এফেক্ট সম্পাদন করে। API কলের জন্য, আপনি সাধারণত fetch বা axios ব্যবহার করেন এবং সেই ডেটা রেসপন্সের পর কম্পোনেন্টের স্টেটে সেট করেন।

useEffect ব্যবহার করে API কল করা

১. fetch API এর মাধ্যমে

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);  // ডেটা স্টেট
  const [loading, setLoading] = useState(true);  // লোডিং স্টেট
  const [error, setError] = useState(null);    // এরর স্টেট

  useEffect(() => {
    // API কল
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())  // রেসপন্স JSON ফরম্যাটে রূপান্তর
      .then((data) => {
        setData(data);   // ডেটা স্টেটে সেট করা
        setLoading(false); // লোডিং ফ্ল্যাগ অফ করা
      })
      .catch((error) => {
        setError(error);  // এরর স্টেটে সেট করা
        setLoading(false);  // লোডিং ফ্ল্যাগ অফ করা
      });
  }, []);  // Dependency array খালি থাকলে, কম্পোনেন্ট একবার রেন্ডার হওয়ার পরই এই কোডটি রান হবে

  if (loading) return <p>Loading...</p>;  // লোডিং চলাকালীন মেসেজ
  if (error) return <p>Error: {error.message}</p>;  // যদি কোনো এরর হয়

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default DataFetcher;

ব্যাখ্যা:

1. useState: আমরা তিনটি স্টেট ব্যবহার করছি:
   • data API থেকে আসা ডেটা ধারণ করতে।
   • loading লোডিং স্টেটের জন্য।
   • error যদি কোনো সমস্যা হয় তবে এরর মেসেজ রাখার জন্য।
2. useEffect: এটি কম্পোনেন্ট রেন্ডার হওয়ার পর একটি API কল করার জন্য ব্যবহৃত হয়েছে।
   • এখানে fetch() ফাংশন ব্যবহার করা হয়েছে। এটি একটি প্রমিজ রিটার্ন করে, যা API থেকে ডেটা ফেচ করতে ব্যবহৃত হয়।
   • setData() এবং setError() ব্যবহার করে স্টেট আপডেট করা হয়েছে।
3. [] (ডিপেনডেন্সি অ্যারে): ডিপেনডেন্সি অ্যারে খালি থাকলে, এটি কম্পোনেন্টের প্রথম রেন্ডার হওয়ার পর একবারই API কল করবে।

useEffect এবং axios এর মাধ্যমে API কল করা

axios একটি পপুলার HTTP ক্লায়েন্ট যা API কল করার জন্য ব্যবহৃত হয়। এটি fetch এর তুলনায় কিছু অতিরিক্ত সুবিধা প্রদান করে, যেমন ইরর হ্যান্ডলিং সহজ করা এবং রিকোয়েস্ট কনফিগারেশন প্রদান করা।

উদাহরণ:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function DataFetcher() {
  const [data, setData] = useState(null);  // ডেটা স্টেট
  const [loading, setLoading] = useState(true);  // লোডিং স্টেট
  const [error, setError] = useState(null);    // এরর স্টেট

  useEffect(() => {
    // API কল
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        setData(response.data);  // ডেটা স্টেটে সেট করা
        setLoading(false);  // লোডিং ফ্ল্যাগ অফ করা
      })
      .catch((error) => {
        setError(error);  // এরর স্টেটে সেট করা
        setLoading(false);  // লোডিং ফ্ল্যাগ অফ করা
      });
  }, []);  // Dependency array খালি থাকলে, কম্পোনেন্ট একবার রেন্ডার হওয়ার পরই এই কোডটি রান হবে

  if (loading) return <p>Loading...</p>;  // লোডিং চলাকালীন মেসেজ
  if (error) return <p>Error: {error.message}</p>;  // যদি কোনো এরর হয়

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default DataFetcher;

ব্যাখ্যা:

1. axios.get(): axios.get() ব্যবহার করে API থেকে ডেটা ফেচ করা হয়েছে। এটি fetch এর মতো কাজ করে, তবে এতে আরো কিছু সুবিধা যেমন, ইরর হ্যান্ডলিং, কনফিগারেশন এবং ডেটা ট্রান্সফর্মেশন রয়েছে।
2. response.data: API থেকে আসা ডেটা response.data এর মাধ্যমে পাওয়া যায় এবং এটি setData() স্টেট ফাংশনে সেট করা হয়।

useEffect-এ Cleanup (API কলের জন্য)

যখন একটি কম্পোনেন্ট আনমাউন্ট (unmount) হয়, তখন API কলের জন্য কিছু ক্লিনআপ প্রয়োজন হতে পারে, যেমন অ্যাক্সিওস রিকোয়েস্ট ক্যান্সেল করা অথবা কোন অ্যাসিনক্রোনাস কাজ শেষ হওয়ার আগে স্টেট আপডেট না হওয়া নিশ্চিত করা।

ক্লিনআপ উদাহরণ:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const source = axios.CancelToken.source();  // API কল ক্যান্সেল করার জন্য টোকেন তৈরি

    axios.get('https://jsonplaceholder.typicode.com/posts', {
      cancelToken: source.token
    })
      .then((response) => {
        setData(response.data);
        setLoading(false);
      })
      .catch((error) => {
        if (axios.isCancel(error)) {
          console.log('Request canceled', error.message);
        } else {
          setError(error);
          setLoading(false);
        }
      });

    return () => {
      source.cancel("Operation canceled by the user.");  // ক্লিনআপ ফাংশন
    };
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default DataFetcher;

এখানে, axios.CancelToken ব্যবহার করে API কল ক্যান্সেল করার একটি ক্লিনআপ মেকানিজম তৈরি করা হয়েছে। এই পদ্ধতিটি API কল দীর্ঘ সময় নিলেও কম্পোনেন্টটি যদি আনমাউন্ট হয়, তবে স্টেট আপডেট হবে না এবং ক্যান্সেল করা হবে।

সারাংশ

useEffect হুক ReactJS-এ API কল বা অন্যান্য সাইড এফেক্টস পরিচালনা করার জন্য অত্যন্ত শক্তিশালী একটি টুল। আপনি fetch অথবা axios ব্যবহার করে API কল করতে পারেন এবং সেই ডেটা স্টেটে সেট করে UI আপডেট করতে পারেন। এটি কম্পোনেন্টের লোডিং, এরর এবং ডেটা হ্যান্ডলিং করতে সহায়তা করে।

ReactJS-এ অ্যাসিঙ্ক্রোনাস ডেটা ফেচিং একটি সাধারণ কাজ, যা অ্যাপ্লিকেশনের রিয়েল টাইম ডেটা প্রদর্শন করতে ব্যবহৃত হয়। সাধারণত, ডেটা ফেচ করতে API কল (যেমন fetch বা axios) ব্যবহার করা হয়। অ্যাসিঙ্ক্রোনাস ফেচিংয়ের সময় আপনাকে সঠিকভাবে লোডিং, সাফল্য এবং ত্রুটি (error) হ্যান্ডলিং করতে হয়। এই টিউটোরিয়ালে আমরা ReactJS-এ অ্যাসিঙ্ক্রোনাস ডেটা ফেচ করার পদ্ধতি এবং ত্রুটি হ্যান্ডলিং কিভাবে করা হয় তা বিস্তারিতভাবে আলোচনা করব।

Asynchronous Data Fetch in ReactJS

React-এ অ্যাসিঙ্ক্রোনাস ডেটা ফেচ করার জন্য আপনি সাধারণত useEffect হুক ব্যবহার করেন। useEffect হুক ব্যবহার করার মাধ্যমে আপনি সাইড-এফেক্ট যেমন API কল, ডেটাবেস থেকে ডেটা ফেচ, ইত্যাদি পরিচালনা করতে পারেন।

১. Basic Fetch Example Using useEffect

import React, { useState, useEffect } from 'react';

function DataFetching() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')  // API URL
      .then((response) => response.json())  // Convert to JSON
      .then((data) => {
        setData(data);        // Set data to state
        setLoading(false);    // Set loading to false after data is fetched
      })
      .catch((error) => {
        setError(error);      // Set error if the request fails
        setLoading(false);    // Set loading to false in case of error
      });
  }, []); // Empty dependency array means it runs only once, after the first render

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return (
    <div>
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataFetching;

এখানে:

• useEffect হুকটি API কলটি একবার ফেয়ার করার জন্য ব্যবহৃত হয়।
• fetch() API কল করার মাধ্যমে ডেটা আনা হয়।
• লোডিং স্টেট ব্যবহৃত হচ্ছে ডেটা ফেচ হওয়ার সময় ইন্টারফেসে লোডিং স্টেট প্রদর্শন করতে।
• catch() ব্লক ব্যবহার করা হয়েছে API কলের ত্রুটি হ্যান্ডলিংয়ের জন্য।

Error Handling in Asynchronous Data Fetch

ডেটা ফেচের সময় ত্রুটি (Error) আসা একটি সাধারণ ঘটনা। এর মধ্যে নেটওয়ার্ক সমস্যা, সার্ভার সাইড ত্রুটি, ভুল API URL ইত্যাদি অন্তর্ভুক্ত থাকতে পারে। React-এ Error Boundaries ব্যবহারের পাশাপাশি, অ্যাসিঙ্ক্রোনাস ডেটা ফেচিংয়ের সময়ও ত্রুটির সঠিক হ্যান্ডলিং জরুরি।

২. Error Handling with try-catch Inside async Function

React-এ async/await ব্যবহার করে আপনি আরো পরিষ্কারভাবে অ্যাসিঙ্ক্রোনাস ডেটা ফেচ করতে পারেন এবং ত্রুটি হ্যান্ডলিং করা সহজ হয়।

import React, { useState, useEffect } from 'react';

function DataFetching() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const data = await response.json();
        setData(data);
      } catch (error) {
        setError(error); // Set error if there is any issue with the fetch
      } finally {
        setLoading(false); // Always run this after the try-catch block
      }
    };

    fetchData();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return (
    <div>
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataFetching;

এখানে:

• async/await ব্যবহৃত হয়েছে ডেটা ফেচিংয়ের জন্য এবং এটি কোডকে আরও পরিষ্কার এবং পড়তে সহজ করে তোলে।
• try-catch ব্লক ব্যবহার করা হয়েছে ত্রুটি ধরার জন্য।
• finally ব্লকটি ব্যবহার করে নিশ্চিত করা হয়েছে যে লোডিং স্টেট ফাইনালি ফালস হবে, যতটা ত্রুটি বা সাফল্য ঘটে।

Error Boundary: Handling Errors in React Component Tree

React-এর Error Boundary একটি স্পেশাল React কম্পোনেন্ট যা এর নীচে থাকা যেকোনো কম্পোনেন্টের ত্রুটি ক্যাচ করতে সাহায্য করে। এটি API কল থেকে ত্রুটি কিংবা ইউজার ইন্টারঅ্যাকশনের কারণে ত্রুটি থেকে রক্ষা করতে পারে।

Error Boundary Example:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    console.log(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h2>Something went wrong: {this.state.error.message}</h2>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

এটি React কম্পোনেন্টের মধ্যে Error Boundary হিসেবে কাজ করে। যখনই কোনো ত্রুটি ঘটবে, এটি সেই ত্রুটির তথ্য দিয়ে একটি fallback UI (যেমন, একটি ত্রুটি মেসেজ) রেন্ডার করবে।

Error Boundary ব্যবহার:

<ErrorBoundary>
  <DataFetching />
</ErrorBoundary>

এখানে, DataFetching কম্পোনেন্টে যদি কোনো ত্রুটি ঘটে, তবে ErrorBoundary তা ক্যাচ করে এবং একটি fallback UI দেখাবে।

সারাংশ

ReactJS-এ অ্যাসিঙ্ক্রোনাস ডেটা ফেচ এবং ত্রুটি হ্যান্ডলিং গুরুত্বপূর্ণ এবং অপরিহার্য টপিক। useEffect হুক ব্যবহার করে আপনি API কল করতে পারেন এবং ডেটা ফেচ করার সময় async/await বা then/catch পদ্ধতিতে ত্রুটি হ্যান্ডলিং করতে পারেন। এছাড়া, React-এ Error Boundaries ব্যবহার করে, অ্যাপ্লিকেশনটিকে আরও স্থিতিশীল এবং ব্যবহারকারীদের জন্য বন্ধুত্বপূর্ণ করতে পারবেন।