Membuat pengait khusus dengan TypeScript di aplikasi React

Membuat pengait khusus dengan TypeScript dalam operasi React adalah cara yang bagus untuk memperbaiki pengaitan dan penggunaan kembali hukum Anda. Pengait khusus memungkinkan Anda untuk menghargai elemen masuk akal ke dalam fungsi yang dapat diterapkan yang dapat berpartisipasi di berbagai faktor dalam operasi Anda. Dalam postingan blog ini, kita akan menjelajahi cara membuat hook khusus dengan TypeScript dalam operasi React, menggunakan fungsi umum, yang akan menangani penetapan biaya data dan mengelola status menggunakan useReducer.

Pertama, mari kita mulai dengan membuat file baru dalam proyek kita bernama useFetch.tsdan mendefinisikan fungsi baru bernama useFetch:

import { useReducer, useEffect } from 'react';

type State = {
    data: any;
    loading: boolean;
    error: Error | null;
};

type Action = 
  | { type: 'LOADING' }
  | { type: 'SUCCESS'; payload: any }
  | { type: 'ERROR'; payload: Error };

const dataFetchReducer = (state: State, action: Action) => {
    switch (action.type) {
        case 'LOADING':
            return { ...state, loading: true };
        case 'SUCCESS':
            return { ...state, data: action.payload, loading: false };
        case 'ERROR':
            return { ...state, error: action.payload, loading: false };
        default:
            throw new Error();
    }
}

const useFetch = <T,>(url: string)=> {
    const [state, dispatch] = useReducer(dataFetchReducer, {
        data: null,
        loading: false,
        error: null,
    });

    useEffect(() => {
        let didCancel = false;

        async function fetchData() {
            dispatch({ type: 'LOADING' });

            try {
                const response = await fetch(url);
                if (!didCancel) {
                    const data = await response.json();
                    dispatch({ type: 'SUCCESS', payload: data });
                }
            } catch (error) {
                if (!didCancel) {
                    dispatch({ type: 'ERROR', payload: error });
                }
            }
        }

        fetchData();

        return () => {
            didCancel = true;
        };
    }, [url]);

    return { ...state };
}

export default useFetch

Kami juga membuat tipe generik T yang dapat digunakan untuk menentukan tipe data respons yang diantisipasi.

Sekarang, setiap komponen aplikasi kita dapat menggunakan pengait unik ini. Mari kita ambil contoh di mana komponen bernama MyComponent perlu mengambil data dari titik akhir API dan menampilkannya:

import { useFetch } from './useFetch';

const MyComponent =()=> {
  const { data, loading, error } = useFetch<{name:string}>('https://jsonplaceholder.typicode.com/posts/1');

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

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

  return (
    <div>
      <h2>{data.name}</h2>
    </div>
  );
}

Selain itu, Kami menggunakan status dari hook untuk menangani skrip pemuatan, keberhasilan, dan kesalahan. Salah satu praktik penuh gaya dalam menggunakan pengait khusus adalah menjaganya tetap kecil dan terkonsentrasi pada indera tertentu. Ini membuatnya lebih mudah untuk memahami hukum dan alasan tentang bagaimana itu digunakan dalam elemen. Praktik gaya lainnya adalah menggunakan konvensi pengambilan yang harmonis untuk kait khusus Anda.

Disarankan untuk menggunakan awalan ` use` untuk semua custom hooks , sehingga jelas bahwa fungsinya adalah hook dan bukan fungsi biasa. Kesimpulannya, membuat hook khusus dengan TypeScript dalam operasi React adalah cara yang bagus untuk memperbaiki asosiasi dan penggunaan kembali hukum Anda. Dengan menggunakan tipe umum TypeScript, Anda dapat menghasilkan pengait yang sebagian besar dapat diterapkan dan mudah dipahami. Dengan menggunakan useEffect, dan useReducer, Anda dapat menangani penetapan biaya data dan pengoperasian state, membuat elemen lebih mudah untuk dipikirkan dan dipelihara.