HTTPリクエスト状態管理の簡単なソリューション.

プロローグ

アバウトミー.
私の名前は、イスラエルに拠点を置く情熱的なウェブ開発者です.

私の目標は何ですか?
知識と思考の共有私のポストの目的は、業界、サイドプロジェクト、オープンソースの貢献に直面している本当の問題を解決することです.

なぜ?
実際の例を見て、常に“リストを行うには”以上の私を助けている.

内容

思考
私は自白して、私は問題の解決策を読んでいない新しい問題に直面しているときにも私は超えて探索するのが好きです.検索では、1つ以上の解決策を見つけました、そして、それから、私は私がすでに書いたコードを変更している時間を浪費します.それはよく聞こえるか?
私の開発者の友人と話して、私はそれがジュニアの開発者の間で共通の問題であると結論付けることができます.

問題
HTTPリクエストの実際の状態を知りたい場合は、エラー(trueまたはfalse)とデータフェッチがある場合は、約束状態(保留中、実行中、拒否されたか、または単に読み込みをしないかどうか).
なぜ?サーバからの応答を待っている間に“Loading”コンポーネントをマウントしたい場合、エラーが発生した場合は“error”コンポーネントをマウントしたい.
私は、より大きな解決策を統合しようとする私の時間を無駄にしますRedux , ContextAPI , そして、最も単純な解決がプロジェクトと私のニーズと正確に合ったとき、別のライブラリCustom Hook
コードを見ましょう

export const useFetch = (url = '', body = {}, method = 'GET') => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);

  useEffect(() => {
    async function fetchData() {
      try {
        const config = {
          headers: {
            method,
            'x-access-token': getToken()
          }
        }
        const response = await fetch(url, config);
        const body = await response.json();
        return body;
      } catch (error) {
        setError('Error')
      }
    }
    fetchData().then((body) => {
      setData(body);
      setLoading(false);
    });
  }, []);

  return { data, loading, error };

};

フックでフックを使用する

const Answers = ({id}) => {   
    const {data,loading,error} = useFetch(`/api/v1/question/${id}`)

    return (
    <>
      {error && <Error/>}
      {loading && <Loading/>}
      { data && <SomeComponent data={data}/>
    </>
    );
};

なぜこの解決策は私と私のプロジェクトに良いですか?
私は完全にソリューションを制御することができますので、それは私とプロジェクトと一緒に成長することを意味します.

概要

結論
Keep it simplest as you can , 必要に応じて解決策を改善します.それはあなたの最も貴重なリソース、時間を節約します.
私はいくつかの知識を共有することができます願っています.
コメントを書くあなたの最後の“overkill”解決されたと何が問題だった?
何か新しいことを学びましたか.コメントで知らせてください.❤️
別の解決策をご存知ですか?👆🏽
あなたはそれが好きでしたか?あなたの友人と共有します.👏🏽
あなたの考えを投稿することを恐れてはいけない.私は、あなたから学ぶために、ここにいます.😇
ネットワーキング?🤝🏽
お読みありがとうございます.