🐣 【日報】React実践の教科書 P192〜200
ENJIN React.js
作成日： 2022/01/04
1

今日やったこと

  • 「モダンJavaScriptの基本から始める React実践の教科書」 P192〜200
    • その他のグローバルStateを扱う方法

学習メモ

Redux

  • Facebookが提唱しているFluxアーキテクチャに沿って設計されている
  • 学習コストが高いことやファイル数やバンドルサイズが膨らみやすいという側面もあるため、導入するのは大規模なアプリケーションやState管理が複雑化するのが見込まれるアプリケーションに適している

Reduxの概念

  • Store, Action, Dispatch, Reducer
    • Reduxでは全てのStateはStoreと呼ばれるオブジェクト内に保持される
    • ReduxではActionをDispatch（送信）する
      • Action -> 「こういうことが起きたよ」と定義しておくもの
    • DispatchされたActionをReducerで受け取る
      • Reducerは「現在のState」と「受け取ったAction」に応じて新たなStateを返却する関数
  • StateをStoreで管理し、Stateの更新は決められたルールに則り一方通行で行うことでState管理に秩序をもたらすことができる

Recoil

  • Facebookが提供している状態管理ライブラリ
  • 2020年5月に公開
  • 2021年8月の段階ではまだexperimental（試験的な段階）
    • 正式にリリースとなるまでは影響範囲の大きいプロジェクトで採用するのは待った方が良い
    • 小さなプロジェクトや個人開発では積極的に採用していって良いフェーズにはあるという印象
    • エンジニアの情報プラットフォームとして話題を集めているZenn( https://zenn.dev/ )も状態管理としてRecoilを採用したと公表している
  • 導入と実装のハードルが低い
    • とにかく気軽に使用できることに特化しており、文法もReact HooksのuseStateに似たようなuse〜といった形で馴染みやすい
  • Reduxの場合は1つの大きなStateを各コンポーネントから参照するが、RecoilはReduxのStoreにあたるデータストアをいくつも作成することができる（データ属性等に応じてストアを分けることが可能）

Recoilの概念

  • Atom, Selector
    • Atomはデータストアのことで、アプリケーションで一意の値をキーに設定することでデータの読み書きを行うことができる
    • SelectorはAtomからデータを取得し変換するためのもの
      • Atomから直接値を参照することもできるが、取得した値を変換する必要がある場合などはSelectorを使用することでロジックを隠蔽することができる
  • 基本として覚えるべき概念はAtom, Selectorのみで、コンポーネント側で参照・更新したいAtomを指定し、Recoilが提供している「useRecoilValue」「useSetRecoilState」「useRecoilState」等のHooksを使うことでuseStateの感覚でグローバルなStateを扱うことができる

Apollo Client

  • GraphQL API をクライアント側で効率良く操作するためのライブラリ
    • バックエンドとのやりとりにGraphQLを採用している場合に限り、このApollo Clientでの状態管理というのも選択肢に入ってくる
  • GraphQLでAPIをやりとりするプロジェクトの多くがApollo Clientを使用しているため、1つの選択肢として覚えておくと良い

所感

状態管理ライブラリについてざっくり学びました。
もう少し掘り下げたく以下の記事を読んでみましたが、現時点では理解できないところがほとんどでした。
もっとステップアップしたら読み返そうと思います。
Yuri Ishiguro