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
340
redux使うのやめました
redux使うのやめました
hirasa
November 11, 2022
Tweet
Share
More Decks by hirasa
See All by hirasa
eslintのプラグインを作成した話
hirasa
1
110
dev_server_proxyのススメ
hirasa
0
120
Other Decks in Programming
See All in Programming
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
180
Elm Form Validation
bkuhlmann
0
520
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
900
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
390
"config" ってなんだ? / What is "config"?
okashoi
0
330
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
180
Ruby Pattern Matching
bkuhlmann
0
930
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
2
210
Milestoner
bkuhlmann
1
410
Next.js App Router
quramy
12
1.9k
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
330
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
4
400
Featured
See All Featured
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
A Modern Web Designer's Workflow
chriscoyier
689
190k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Optimizing for Happiness
mojombo
370
69k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
Web Components: a chance to create the future
zenorocha
306
41k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
How to name files
jennybc
65
93k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
1.9k
Design by the Numbers
sachag
274
18k
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/