グローバルステータス管理の難題-ユーザー情報(ログイン情報)(feat.recoil)

ワッフルカードサービスが気になるなら!
ワッフルカードの表示サービス:https://waffle-card.com/
ワッフル寄宿センター見学:https://github.com/waffle-card
非同期データをグローバルに管理する必要がある場合はどうすればいいですか?
従来,ネットワークリクエストの結果を受信したデータをグローバル状態に管理する際には,以下のような構成で設計されていた.

これは、コンポーネント内部からapiリクエストを送信し、応答データを受信して商店に保存する方法である.
その後ウィンチヒョクの素子再考大会発表ビデオを見て、私は考えを変えました.
ビデオをパブリッシュするコアは、注目点を分離するものではありませんが、コンポーネント管理ネットワークから要求され、グローバル状態に格納されているすべてのロジックは、権限が大きすぎて、コンポーネントが重すぎると思います.したがって,注目点を分離し,以下のように構造を変える必要があると考える.

コンポーネントがステータスのみを必要とする場合、データはショップに要求されます.ストアにキャッシュされたデータがある場合は戻り、ない場合はネットワークリクエストを発行し、データを受信してキャッシュし、データを返します.
その利点は、コンポーネントがビューに関連する処理を集中的に開発し、ショップがデータに関連する論理を一度に管理できるため、メンテナンス性を向上させることです.
ワッフルカードのユーザー情報
ワッフルカードサービスにログインした後、ログイン情報をグローバル状態に管理しようとします.上記の構造にするためにcontextで直接カスタマイズできますが、今回はrecoilのセレクタを使うことにしました.
なぜなら,recoilのセレクタを用いることで,非同期処理を一度に容易に完了できるからである.

import { atom, selector } from 'recoil';
import { authApi } from '@/apis';
import { TOKEN_NAME } from '@/constants';

export const userState = atom({
  key: 'user',
  default: selector({
    key: 'user/get',
    get: async () => {
      const token = sessionStorage.getItem(TOKEN_NAME);
      if (!token) return null;

      try {
        const {
          data: { id, email, name },
        } = await authApi.me();

        return { id, email, name };
      } catch (error: any) {
        sessionStorage.removeItem(TOKEN_NAME);
        console.error(`in User Recoil: ${error.message}`);
        return null;
      }
    },
  }),
});

上記のコードの内容は,usetStateでセレクタを用いて非同期論理を処理することである.トークンをチェックし、ユーザー情報を受信するネットワークリクエストを行い、対応するユーザー情報を返します.
セレクタのデフォルト値はキャッシュされます.これは、データが存在する場合、ネットワーク要求を処理し、直ちにデータを返すのではなく、データを効率的に管理し、ネットワーク要求を管理することができることを意味する.
バックストロークは簡単でいいですよね?でも.
ただし、recoilでは、このキャッシュが悪意のあるキャッシュになる可能性があります.キャッシュが成功すると、データが変更されたことを検出し、保存を続行したデータを返すことができないという問題があります.後部座席はこの件を処理する方法を提供すると思いますが、まだ分かりません.
管理キャッシュをカスタマイズする場合はcontextを使用する必要がありますか?クエリーへの応答であることが最近分かりました.非同期ロジックの管理は非常に簡単で、キャッシュの問題も簡単に解決できるという.機会があれば反応照会を調べてみましょう