Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
redux使うのやめました
Search
hirasa
November 11, 2022
Programming
1
500
redux使うのやめました
redux使うのやめました
hirasa
November 11, 2022
Tweet
Share
More Decks by hirasa
See All by hirasa
eslintのプラグインを作成した話
hirasa
1
120
dev_server_proxyのススメ
hirasa
0
140
Other Decks in Programming
See All in Programming
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
170
開発生産性を上げるための生成AI活用術
starfish719
3
670
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
220
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
140
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
120
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
250
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
170
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
300
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
550
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
1.3k
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
310
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
170
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.5k
Done Done
chrislema
185
16k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
GitHub's CSS Performance
jonrohan
1032
470k
RailsConf 2023
tenderlove
30
1.2k
How GitHub (no longer) Works
holman
315
140k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Building Adaptive Systems
keathley
43
2.8k
Embracing the Ebb and Flow
colly
88
4.8k
Transcript
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/