📡 React Native (TypeScript) – Axios দিয়ে API Call (File Based Structure)

React Native অ্যাপে বাস্তব জীবনের প্রায় সব অ্যাপেই API থেকে ডাটা আনা লাগে। এই লেসনে আমরা শিখবো কীভাবে Axios ব্যবহার করে TypeScript + File Based Structure অনুসরণ করে সুন্দর ও মেইনটেইনেবল API Call করা যায়।

🤔 Axios কেন ব্যবহার করবো?

• Fetch এর চেয়ে সহজ সিনট্যাক্স
• Automatic JSON parsing
• Error handling সহজ
• Interceptor support
• TypeScript এর সাথে খুব ভালো কাজ করে

📂 File Based Folder Structure

src/
 ├── api/
 │   └── axiosInstance.ts
 ├── services/
 │   └── userService.ts
 ├── types/
 │   └── user.ts
 └── screens/
     └── UserScreen.tsx
  

⚙️ Step 1: Axios Instance তৈরি করা

প্রথমে আমরা একটি common Axios instance বানাবো যাতে baseURL একবার সেট করলেই সব জায়গায় ব্যবহার করা যায়।

import axios from "axios";

const axiosInstance = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com",
  timeout: 5000,
  headers: {
    "Content-Type": "application/json",
  },
});

export default axiosInstance;
  

🧾 Step 2: TypeScript Type তৈরি করা

API থেকে যেই ডাটা আসবে তার জন্য আমরা TypeScript interface ব্যবহার করবো।

export interface User {
  id: number;
  name: string;
  email: string;
}
  

🔌 Step 3: API Service File তৈরি করা

API Call সবসময় Screen ফাইলের বাইরে রাখা ভালো। এতে কোড clean থাকে।

import axiosInstance from "../api/axiosInstance";
import { User } from "../types/user";

export const getUsers = async (): Promise<User[]> => {
  const response = await axiosInstance.get<User[]>("/users");
  return response.data;
};
  

📱 Step 4: Screen থেকে API Call করা

এখন আমরা React Native Screen থেকে Axios API call করবো।

import React, { useEffect, useState } from "react";
import { View, Text, FlatList, ActivityIndicator } from "react-native";
import { getUsers } from "../services/userService";
import { User } from "../types/user";

const UserScreen: React.FC = () => {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUsers();
  }, []);

  const fetchUsers = async () => {
    try {
      const data = await getUsers();
      setUsers(data);
    } catch (error) {
      console.log("API Error:", error);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return <ActivityIndicator size="large" color="teal" />;
  }

  return (
    <FlatList
      data={users}
      keyExtractor={(item) => item.id.toString()}
      renderItem={({ item }) => (
        <View>
          <Text>{item.name}</Text>
          <Text>{item.email}</Text>
        </View>
      )}
    />
  );
};

export default UserScreen;
  

🖥️ Output (কি দেখাবে?)

✅ Best Practices

• Axios instance আলাদা ফাইলে রাখুন
• API logic service ফাইলে রাখুন
• TypeScript interface অবশ্যই ব্যবহার করুন
• Error handling try/catch দিয়ে করুন
• Loader ব্যবহার করুন