データを取得するためのカスタムフックの作成

カスタムフックを実装するための前提条件

機能部品の知識と反応フック.

ライブラリ/パッケージが必要です.

以下のようなプレースホルダAPIjsonplaceholder

このブログ記事のトピック

Axiosでカスタムフックを作成するために使用されるアーキテクチャパターン.getd ()

カスタムフックの実装.

実際のコンポーネントでの使用.

カスタムのreduxアクションの追加のようなカスタムフックのためのより多くのusecase、および複数の残りのメソッドの実装.

私たちのカスタムフックのアーキテクチャ.

すべてのカスタムフックは一般的に状態を返します.カスタムフックとしてuseFetch . によるとRules of Hook すべてのカスタムフックを持っている必要がありますuse それの前にキーワードとしてフックとして認識する.

useFetch は以下のブロックから成ります:

パラメータ

URL、メソッドタイプ、body、およびヘッダーのようなパラメータのリスト.

状態ブロック:

これはすべてのローカル州から成ります.useState

有効ブロック:

これはaxios 私たちがサーバにすることを呼び出します.

図の下には、より明確なビューがありますuseFetch が設計されている:


カスタムフックの実装useFetch

まずURLをパラメータとして受け入れる関数を作成しましょう.また、ローカル関数変数をこの関数に含めます.

const useFetchData = (url) => {
  const [isLoading, setIsLoading] = useState(false);
  const [apiData, setApiData] = useState(null);
  const [serverError, setServerError] = useState(null);
};

上記の関数はuseStates AS

isLoading APIがデータを取得したか、まだデータをフェッチしているかどうかを調べます.

apiData : データが正常にフェッチされた場合、データはapiData 変数

serverError : APIエンドポイントからデータを取得する際にエラーが発生した場合は、serverError 変数.

我々は、追加する予定ですuseEffect フックの反応.このフックはaxios.get(URL) 要求されたURLを呼び出します.

const useFetch = (url) => {
  const [isLoading, setIsLoading] = useState(false);
  const [apiData, setApiData] = useState(null);
  const [serverError, setServerError] = useState(null);

  useEffect(() => {
    setIsLoading(true);
    const fetchData = async () => {
      try {
        const resp = await axios.get(url);
        const data = await resp?.data;

        setApiData(data);
        setIsLoading(false);
      } catch (error) {
        setServerError(error);
        setIsLoading(false);
      }
    };

    fetchData();
  }, [url]);
};

The axios コールはAsync関数fetchedData . It consists of try...catch ブロック.一旦データが待たれるならば、我々はそれを保存しますapiData 使用setApiData . あなたが観察したならば、私もセットしましたisLoading to true useeffectの開始時.これは、APIがサーバーへの呼び出しを開始したときにローダを表示したいので、意図的に行われます.一旦我々が200のステータスでレスポンスを得るならばisLoading to false 使用setIsLoading .
何らかのエラーがあれば、我々はserverError state to error 一緒にisLoading state to false .

最後に、すべてのローカル状態変数をオブジェクトとして返します.

const useFetch = (url) => {
  const [isLoading, setIsLoading] = useState(false);
  const [apiData, setApiData] = useState(null);
  const [serverError, setServerError] = useState(null);

  useEffect(() => {
    setIsLoading(true);
    const fetchData = async () => {
      try {
        const resp = await axios.get(url);
        const data = await resp?.data;

        setApiData(data);
        setIsLoading(false);
      } catch (error) {
        setServerError(error);
        setIsLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { isLoading, apiData, serverError };
};

実際のコンポーネントでの使用
カスタムフックを使用できる例を見てみましょうuseFetch . 以下はコードですindex.js ファイル.

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import useFetch from "./useFetch";

const App = () => {
  const { isLoading, serverError, apiData } = useFetch(
    "https://jsonplaceholder.typicode.com/posts/1"
  );
  return (
    <div>
      <h2>API data</h2>
      {isLoading && <span>Loading.....</span>}
      {!isLoading && serverError ? (
        <span>Error in fetching data ...</span>
      ) : (
        <span>{JSON.stringify(apiData)}</span>
      )}
    </div>
  );
};

const rootElement = document.getElementById("root");

ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

今すぐ任意の反応フックのように直接我々のカスタムフックを使用してデータを取得することができます.ご覧の通り.isLoading and serverError niceエラーメッセージを表示するコンポーネントの条件付きレンダリングに使用できます.

追加ユースケース
Adaptive Reduxのアクションを追加したり、APIメソッドを一般化したりするなどの追加ユースケースを使用することができます.

アドホックReduxアクションの追加
また、アプリケーションにReduxを統合することができますし、グローバル状態にAPIの応答を追加します.usefetchへの変更は以下のようになります.

const useFetchData = (url) => {
  const dispatch = useDispatch();
  const [isLoading, setIsLoading] = useState(false);
  const [apiData, setApiData] = useState(null);
  const [serverError, setServerError] = useState(null);

  useEffect(() => {
    setIsLoading(true);
    const fetchData = async () => {
      try {
        dispatch(fetchApiData());
        const resp = await axios.get(url);
        const data = await resp?.data;

        dispatch(fetchApiSuccess(data));
        setApiData(data);
        setIsLoading(false);
      } catch (error) {
        setServerError(error);
        dispatch(fetchApiFailure());
        setIsLoading(false);
      }
    };

    fetchData();
  }, [dispatch, url]);

  return { isLoading, apiData, serverError };
};

fetchApiData , fetchApiSuccess , and fetchApiFailure は、データをREDUXグローバル状態に格納すると共に、特定のreduxアクションを呼び出すthunksです.

APIメソッドの一般化
我々useFetch 現在実行中GET リクエスト.理想的なシナリオはuseFetch リクエストのすべてのタイプを実行するにはPOST , PUT 以下のコードは、一般的なaxios呼び出しを行います.

const useFetch = (method, url, body) => {
  const [isLoading, setIsLoading] = useState(false);
  const [apiData, setApiData] = useState(null);
  const [serverError, setServerError] = useState(null);

  useEffect(() => {
    setIsLoading(true);
    const fetchData = async () => {
      try {
        const resp = await axios({
          method: method,
          url: url,
          data: body
        });
        const data = await resp?.data;

        setApiData(data);
        setIsLoading(false);
      } catch (error) {
        setServerError(error);
        setIsLoading(false);
      }
    };

    fetchData();
  }, [url, method, body]);

  return { isLoading, apiData, serverError };
};

使用法はインデックスと同じです.js変更するものだけが関数定義です:

const { isLoading, serverError, apiData } = useFetch(
    "GET",
    "https://jsonplaceholder.typicode.com/posts/1",
    {}
  );

これらは私が最も一般的に使用できると思う使用例のいくつかです.あなたはデータを取得し、我々のニーズごとにそれを強化する上記のカスタムフックをすることができます.
このブログ記事で使用するコードは、次のサンドボックスURLで確認できます.
https://codesandbox.io/s/react-custom-hook-sample-dcuf4
私に手を伸ばす自由