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
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
550
AIコーディングAgentとの向き合い方
eycjur
0
270
AI時代のUIはどこへ行く?
yusukebe
18
9k
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
1
190
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
170
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
290
旅行プランAIエージェント開発の裏側
ippo012
2
910
Navigating Dependency Injection with Metro
zacsweers
3
2k
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
240
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The Invisible Side of Design
smashingmag
301
51k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Into the Great Unknown - MozCon
thekraken
40
2k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Building Adaptive Systems
keathley
43
2.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Designing for humans not robots
tammielis
253
25k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
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/