［技術］応答状態管理(Redux、React Query、SWR)

10469 ワード

テキストリンク

Intro

反応器の状態は次のように分けられます.

Local state

Global state

Server state

これらのステータスを管理するライブラリが存在します.

1 Redux

2 Fetch library (SWR, react-query, ...)

次のライブラリの存在理由を整理します.

1 REDUX

Reduxは、Context APIが現在の形で使用を改善する前に、UserReducerというHookが存在する前に作成されたライブラリです.
実際、Context APIが改善される前に、プロジェクトでのグローバル状態管理は非常に困難であった.従来のプログラミング方法では、冗長状態などのステータス管理ライブラリにグローバルステータスとサーバステータスを含めることが主です.

npmtrendsは,現在反応を用いている項目の45%が反応器を用いていることを示した.
アシストデバイスでは、同期ロジックは動作およびアシストデバイスを直感的に作成できますが、非同期ロジックを処理する場合は、ミドルウェアを使用する必要があります.冗長ミドルウェアは、発生した動作をブロックして他の論理を実行することを可能にし、非同期論理を処理するミドルウェアにはredux-thunkとredux-sagaがある.

// react-saga

function* getSomethingSaga() {
  try {
    const res = yield call(fetchSomething);

    yield put({
      type: "successAction",
      payload: res.data,
    });
  } catch {
    yield put({
      type: "failAction",
      payload: res.data,
    });
  }
}

function* someSaga() {
  yield takeEvery("someAction", getSomethingSaga);
}

function* rootSaga() {
  yield all[someSaga()];
}

store.dispatch({ type: "someAction" });

しかし,これにより,1つの店舗でグローバル状態とサーバ状態を管理するため,店舗はますます肥大化し,興味点を分離することが困難になる.

2 Fetch library

SWR、react-queryなどのデータ取得ライブラリを使用すると、ステータス管理ライブラリから非同期ロジックを削除し、Global State(Global State、Server State)を分離して宣言プログラミングできます.

// SWR

import useSWR from "swr";

function Profile() {
  const { data, error } = useSWR("/api/user", fetcher, options);

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;
  return <div>hello {data.name}!</div>;
}

サーバのステータスを変更してグローバル・ステータスを更新する必要がある場合は、サーバのステータスを再構築する必要はありません.鍵とデータをmutate関数に渡すだけで、再構築せずに更新できます.

const Profile = () => {
  const { mutate } = useSWRConfig();
  const [profile, setProfile] = useState({ name: "jojiiiiyoung" });

  const handleEditProfile = () => {
    await updateProfile(profile);
    // mutate 함수에 data 인자를 전달하면 refetch 없이 즉시 변경
    mutate(`/user/${userId}`, profile, false);
  };
};