• Home
  • React 関連記事を読む #2

React 関連記事を読む #2

thumbnail

記事情報

https://zenn.dev/babel/articles/recoil-for-babel

TLDR(ChatGPT  で生成しています)

Recoilにロジックを載せる運用戦略の要約:

Recoil はステート管理ライブラリとして知られていますが、そのデータフローグラフを利用してアプリケーションロジックを構築する点が特徴的です。具体的には、検索画面での「検索条件が更新されたら新しい検索結果が表示される」というロジックの実装方法や、Recoilの非同期セレクタを利用した非同期処理の取り扱い、ページネーションの例など、Recoilを用いた実践的なアーキテクチャの考え方が紹介されています。

要点:

  • Recoilのデータフローグラフを利用してアプリケーションロジックを構築。
  • 検索画面のロジックや非同期処理の取り扱いにRecoilの非同期セレクタを活用。
  • ページネーションの実装例やRecoilベースのアーキテクチャの考え方を紹介。
  • この記事は、Recoilをどのように活用してアプリケーションのロジックを構築するか、その実践的な方法について解説しています。

    メモ

  • Selectorは、依存先のステート(atomまたは別のselector)の値が更新された場合に再計算されるステート、useRecoilValueといったAPIを利用すれば、selectorの計算が同期的か非同期的かを気にせずにステートの値を取り出すことができる
  • Recoilの出番です。RecoilではReactの外のレイヤーで計算を行なってしまって、完成した計算結果をReactに見せることで、React側には「検索条件の変更」と「ローディング状態への変化」が同時に起こったように見える
  • Recoilでは非同期処理もselectorにできる
  • ローカルの selector を作ることができる
  • // graphql-codegenで生成されたTypedDocumentNode
    import { MyQueryNode } from './my-query.generated.ts'
    
    // RecoilStateReadonly<MyQueryResult> 型
    const myQueryState = createUrqlSelector({
      key: 'my-query',
      query: MyQueryNode
    });
    
    // このようにすればリクエストを発火しMyQueryの結果を得ることができる
    const useMyQuery = () => {
      return useRecoilValue(myQueryState)
    }
  • Recoilの役目がサブスクリプション管理ではなくデータのスナップショットの提供に明確化されている
  • テストの書き方
  • 雑記

  • input で入力された文字で検索して結果を候補として表示する機会は多い、そのときの実装アイディアとしてかなりよいと感じた
  • ローカルの selector を作成して、再発火を行う仕組みをうまく使えるとかなりよさそう
  • Recoil の開発は止まっているらしいので、必要に応じて Jotai への移行を検討する
  • avatar

    PROFILE

    ykk

    Engineer / Japan 好きなものはカレーと King Gnu

    TAG