グローバル・ステータス管理を覆す理由📌

reduceはステータス管理ライブラリです.
構成部品のステータス管理ロジックを分離することで、効率的に管理できます.
グローバルステータスも一緒に管理されるライブラリです.
プロジェクトの初期に役立つhookと巨大な状態をより簡単に処理することができます.
リデックスを持ってきました.

問題が発生😡

プロジェクトの4週間後
私たちのstoreは非常に肥大化しています.
グローバルステータスを取得するために書くというより、
呼び出したAPIにデータを書き込み、管理することで、単一のコンポーネントでもグローバル状態の使用が減少し、APIリクエスト状態を使用して使用されるようになりました.
これによりstoreはいつの間にかグローバルステータス管理ではなくなります.
より多くのAPI通信の集中化を感じさせます.
storeは非同期通信の中央システムと見なし,
完全な戦区状態管理のために、別の解決策を考え出した.

React Queryの導入🔥

React Queryは*サーバの状態を管理するためのライブラリです.
うち*Server Stateは

は、クライアントが所有または制御しないリモートスペースに格納されます.

データのインポートと更新には非同期API

が必要

他の人と一緒に使用し、私が知らないうちに

を更新することができます.

クライアントで使用されるデータは「期限切れ」になる可能性があります.

グローバル状態と単一素子上の非同期通信を完全に分離するために、
React Queryライブラリを使用してサーバーのステータスをスクロールすることを決定します.

React Queryの使用

ReactQueryはとても魅力的なライブラリです.
私たちはReact Queryが提供する2つの強力な機能に興味を持っています.

データのマウントまたは作成、更新および削除要求の発行時に、isLoadingおよびisSuccessなどのデータ取得のために複数のconfig

が使用される

のQueryのUnique Keyを受信することにより、QueryClientの失効したQueryメソッドを使用して特定のクエリの強制Refresh機能

を実行することができる.

const { isLoading, error, data, isFetching } = useQuery("repoData", () =>
    fetch(
      "https://api.github.com/repos/tannerlinsley/react-query"
    ).then((res) => res.json())
  );

  if (isLoading) return "Loading...";

  if (error) return "An error has occurred: " + error.message;

受信したデータに加えて、ロードやerrorなど様々なFlagをより便利に使用できます.

	const { mutate: deleteClass } = useMutation(
		(classid: string) => api.deleteClass(classid),
		{
			onSuccess: () => {
				console.log('1');
				dispatch(closeModal());
				queryClient.invalidateQueries('teachCard');
				navigate('/');
			},
		}
	);

の作成、更新、削除など、ワークステーションリクエスト時にサーバの値が変化します.
QueryClientが提供するinvalidateQueryメソッドにより、この鍵を持つQueryに対してrefectを行い、グローバル状態と同じ効果でリフレッシュすることができる.

n/a.結論🎭

個々のコンポーネントは少し大きく見えますが、Storeはクライアントの状態を管理するためにのみ使用されるため、Storeとのコードは非常に簡単になります.