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
Cache Me If You Can
ryunen344
2
680
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
100
AWS発のAIエディタKiroを使ってみた
iriikeita
1
180
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
Design Foundational Data Engineering Observability
sucitw
3
190
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
140
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
200
TDD 実践ミニトーク
contour_gara
1
290
Navigating Dependency Injection with Metro
zacsweers
3
250
旅行プランAIエージェント開発の裏側
ippo012
2
890
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
320
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Building Applications with DynamoDB
mza
96
6.6k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Building Adaptive Systems
keathley
43
2.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
What's in a price? How to price your products and services
michaelherold
246
12k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Faster Mobile Websites
deanohume
309
31k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
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/