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
320
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
PHPカンファレンス関西2024でLTとスタッフした
ohmori_yusuke
2
120
So You Think You Know Git - Part 2
schacon
PRO
0
1.3k
PHP で読む楽しいコアダンプ
sji
0
220
Learning PHP and Static Analysis with PHP Parser
inouehi
1
220
Laravel標準バリデーションでできること
hmb_ok
1
330
開発者体験を変えるInfrastructure as Codeの新機能6選!
konokenj
4
850
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
130
PHPerKaigi 2024〜10年以上動いているレガシーなバッチシステムを Kubernetes(Amazon EKS) に移行する取り組み〜
tshinowpub
1
170
LPIXEL×CADDi_kaerururu
kaerururu
3
270
マイクロサービスがほしいと思ったときに本当に必要だったもの〜なぜ人は共通基盤の夢を見るのか〜 / why microservice
77web
5
830
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
160
SmartHRにおけるプロダクトエンジニア/product_engineer_in_smarthr_20240227
saitoryc
5
180
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
14
2k
GraphQLの誤解/rethinking-graphql
sonatard
48
9.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
[RailsConf 2023] Rails as a piece of cake
palkan
21
3.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
Product Roadmaps are Hard
iamctodd
43
9.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
Automating Front-end Workflow
addyosmani
1353
200k
Design by the Numbers
sachag
274
18k
Become a Pro
speakerdeck
PRO
8
4.2k
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/