Redux使うのやめました 2022.11.12 クーガー株式会社 平崎 葵

⾃⼰紹介 ´ 平崎 葵 (ひらさき まもる) ´ 元道産⼦ ´ クーガー株式会社所属 ´ サーバ、フロントエンジニア ´ キックボクシング始めました ´ バンドやってた ´ 誰か⼀緒にモンハンやりましょう ´ https://twitter.com/m_hirasaki1985 ´ よかったらフォローしてください

発表内容 ■⽬次 1. そもそもReduxってなに︖ 2. Reduxの問題点 3. 解決のアプローチ 4. 今後の課題 5. 最後に

そもそもReduxって何︖

Reduxを使わない状態管理 ´ 状態はコンポーネント⼀つ⼀つが管理していた ´ データやイベント(バケツリレー)の管理が⼤変 Component Component Component Component Component Component データの流れ イベントの流れ ■ボタンをクリックした︕ 親コンポーネントまで伝える ■APIで取得してきたデータ 使⽤したいコンポーネントまで伝播させる

Reduxとは ´ 2015年にDan Abramov⽒とAndrew Clark⽒によって作成された状態管理ライブラリ ´ アプリケーション全体の状態を⼀括管理できる ■参考 • Redux⼊⾨【ダイジェスト版】10分で理解するReduxの基礎 • Reduxの仕組みを理解する

Reduxを使った場合の状態管理 Component Component Component Component Component redux 状態(state)とイベント(action)を⼀箇所(redux)で管理 Component ■ボタンをクリックした︕ Reduxのactionに伝える ■APIで取得してきたデータ Reduxでデータを管理させ、それぞれのコ ンポーネントで参照する

(私が思う)Reduxの問題点 ´ state, actionの設計をちゃんとしないとえらいことになる ´ 何でもかんでもReduxに⼊れがち ´ ⼤規模になるにつれて、actionの発⽕のタイミングが掴みづらくなる ´ いつの間にかデグレを起こしてしまう など

■Redux NGパターン例 ■state • 話し相⼿ ■action • 話し相⼿を変更する コンポーネントA コンポーネントB 1. 話が終わったので 話し相⼿を変更し たい 2. こっちの話し相⼿も変わっちゃう

うちのプロジェクトでのReduxの使い⽅ ´ AtomicDesignを採⽤ ´ Reduxは⼤元のコンポーネント(page)からしか参照しない ´ actionが呼ばれるタイミングを管理しやすくする ´ stateの不正参照防⽌ ■課題 ´ Pageコンポーネントの肥⼤化 ´ Propsによるバケツリレー(stateもactionも) redux page page organisms organisms organisms molecules molecules molecules atom … …

変数のスコープについて ´ 変数のスコープは可能な限り⼩さくする ´ 良いコードを書く時の原則の⼀つ ■スコープが⼤きいと何が問題か ´ 予期しないところから値が書き換えられて、 バグやデグレの元となる

Reduxのスコープは⼤きい ´ Reduxはどこからでもアクセスできて便利 ´ どこからでもアクセスできる = スコープが⼤きい ´ いつのまにか情報が書き換えられる可能性がある ´ 不正に書き換えられることを検出するのが難しい Component Component Component Component Component redux Component スコープが⼤きい

解決のアプローチ

代わりにContextを使ってみた ■Contextとは︖ ´ Contextの範囲内でデータやイベントの共有ができる ´ データやイベントのバケツリレーを回避できる ■参考URL ´ React Contextの使い⽅ ´ React Context / Hooks ⼊⾨

ContextB state: 話し相⼿ action: 話し相⼿を変更する ContextA state: 話し相⼿ action: 話し相⼿を変更する Contextで実現したいこと ´ スコープを制限したい ´ 機能毎にstateとactionを管理したい ´ スコープ以外はreduxのように使いたい ´ Stateの型定義、actionの型定義など コンポーネントA コンポーネントB スコープが違うの で参照できない ❌

実際のContextの使い⽅ ■Contextの構成 ´ Globalで使うContext ´ Auth, UserのContext ´ 機能毎で使うContext ´ PageA, PageBのContext ´ Context内部ではuseReducerで 状態管理 ´ Stateを型定義したいため Auth Context pageA pageB organisms organisms organisms molecules molecules molecules … … … App.tsx User Context Router Page Context B Page Context A molecules

やってみてどうだったか ■良かったこと ´ スコープの問題を解決できた ■課題 ´ Contextが肥⼤化しがち ´ 状態管理と機能提供をおこなっている ため ´ レンダリング回数が多い気がする ■今後のAction ´ Contextは状態管理のみに徹する ´ レンダリングパフォーマンス改善 ´ 正しく使う ReactContext

他の⼿段 ■Redux以外にも状態管理ライブラリはある ´ Zustand ´ Recoil ´ Jotai など ■Ducksパターン Reduxでもmoduleで分割することでスコープリスクの軽減できる [React] Ducks というデザインパターン [Redux] ■参考URL ´ Reactの状態管理ライブラリを⽐較してベストな選択をしよう︕

エンジニア募集 我が社ではフロントエンジニアを募集しています︕ クーガー株式会社 https://couger.co.jp/