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
2023年末時点のReduxをざっくり知る
Search
nmemoto
December 09, 2023
Technology
0
510
2023年末時点のReduxをざっくり知る
ゆるWeb勉強会@札幌 #25 のLT資料です
https://mild-web-sap.connpass.com/event/298899/
nmemoto
December 09, 2023
Tweet
Share
More Decks by nmemoto
See All by nmemoto
React.lazyを他コンポーネントに定義した札を下げています
nmemoto
0
46
ChatGPT APIを使ったLINEボットでCloudflare Workersを使う
nmemoto
0
630
Other Decks in Technology
See All in Technology
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
190
第9回情シス転職ミートアップ_テックタッチ株式会社
forester3003
0
250
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
270
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.3k
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
550
rubygem開発で鍛える設計力
joker1007
2
220
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
330
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
yamitzky
0
440
【PHPカンファレンス 2025】PHPを愛するひとに伝えたい PHPとキャリアの話
tenshoku_draft
0
120
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
130
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
260
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
220
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Building Applications with DynamoDB
mza
95
6.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Unsuck your backbone
ammeep
671
58k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Embracing the Ebb and Flow
colly
86
4.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
Transcript
2023年末時点の Reduxをざっくり知る ゆるWeb@札幌 #25 nmemoto
自己紹介 • パッケージベンダー所属(2023/11~) • フロントエンド業務1年生(36歳) • 登壇 ◦ Cloudflare Meetup
Sapporo Vol.1(2023-07-18) ▪ ChatGPT APIを使ったLINEボットでCloudflare Workers を使う - Speaker Deck • ゆるWeb札幌初参加 nmemoto (umemotoのuをひっくり返してnにして、んめもと) • https://twitter.com/nmemoto • https://bsky.app/profile/nmemoto.bsky.social • https://zenn.dev/nmemoto • https://github.com/nmemoto
Connpassより
なんで(いまさら)Redux?ちゃんと語れる? • なんでRedux? ◦ 業務で使うことになった ◦ 調べてみると最近の Redux良いのではと思った • ちゃんと語れる?
◦ React を前提とした話をしてしまうのでわからない人いるかも ◦ 私の理解度で”ちゃんと”は難しいかも ◦ 自分なりの解釈で公式ドキュメントと違う言葉を使ってしまうかもしれないです ◦ 興味を持ったら公式ドキュメントを見て!
おしながき • 自己紹介(5分) • Reduxの基本概念(20分) • 2023年末時点のRedux(20分) • まとめ(5分)
おしながき • 自己紹介(5分) • Reduxの基本概念(20分) • 2023年末時点のRedux(20分) • まとめ(5分) これ全部足したら50分なのでは?
おしながき • 自己紹介(30秒) • Reduxの基本概念(2分) • 2023年末時点のRedux(2分) • まとめ(30秒) 10倍界王拳で頑張ります!(多分無理)
https://www.irasutoya.com/2018/07/blog-post_876.html
Redux • JavaScriptアプリケーションのための予測可能な状態コンテナ ◦ アプリケーション内のグローバルな状態を整理するためのパターンおよびライブラリ • リリース ◦ 2015-08-15 v1.0
◦ 2023-12-04 v5.0 • 主な関係者 ◦ Dan Abramov ▪ 作者 ▪ Reactコアチーム ▪ https://twitter.com/dan_abramov ◦ Mark Erikson ▪ 現在の主メンテナー ▪ https://twitter.com/acemarke • その他 ◦ Next.js で利用可とのこと ▪ https://redux.js.org/usage/nextjs ◦ React以外でも利用可 ▪ Reactと使用されることがほとんど https://redux.js.org/ の上部
Reduxの基本概念
状態管理をいい感じにするためのReduxの概念 • 一方向のデータフローの制御 • 状態管理に関する概念分離 ◦ 概念(用語) ▪ Actions ▪
Action Creators ▪ Reducers ▪ Store ▪ Dispatch ▪ Selectors ◦ ViewとStateの独立性を維持するルール • 状態を一元管理 • イミュータビリティ https://redux.js.org/tutorials/essentials/part-1-overview-concepts#state-management
状態管理をいい感じにするためのReduxの概念 https://redux.js.org/tutorials/essentials/part-1-overview-concepts#state-management • 一方向のデータフローの制御 • 状態管理に関する概念分離 ◦ 概念(用語) ▪ Actions
▪ Action Creators ▪ Reducers ▪ Store ▪ Dispatch ▪ Selectors ◦ ViewとStateの独立性を維持するルール • 状態を一元管理 • イミュータビリティ ユーザー入力に基づいてアプリで発生するイ ベント、および状態の更新をトリガー アプリを動かす信頼で きる情報源 現在の状態に基づくUI の宣言的な記述
状態管理をいい感じにするためのReduxの概念 https://redux.js.org/tutorials/essentials/part-1-overview-concepts#state-management • 一方向のデータフローの制御 • 状態管理に関する概念分離 ◦ 概念(用語) ▪ Actions
▪ Action Creators ▪ Reducers ▪ Store ▪ Dispatch ▪ Selectors ◦ ViewとStateの独立性を維持するルール • 状態を一元管理 • イミュータビリティ
状態管理をいい感じにするためのReduxの概念 https://redux.js.org/tutorials/essentials/part-1-overview-concepts#state-management • 一方向のデータフローの制御 • 状態管理に関する概念分離 ◦ 概念(用語) ▪ Actions
▪ Action Creators ▪ Reducers ▪ Store ▪ Dispatch ▪ Selectors ◦ ViewとStateの独立性を維持するルール • 状態を一元管理 • イミュータビリティ 状態を分けて管理しない →状態管理の複雑度を上げない • 予測可能な状態変更 • 機能追加・変更容易性 • デバッグしやすさ
状態管理をいい感じにするためのReduxの概念 https://redux.js.org/tutorials/essentials/part-1-overview-concepts#state-management • 一方向のデータフローの制御 • 状態管理に関する概念分離 ◦ 概念(用語) ▪ Actions
▪ Action Creators ▪ Reducers ▪ Store ▪ Dispatch ▪ Selectors ◦ ViewとStateの独立性を維持するルール • 状態を一元管理 • イミュータビリティ 既存の状態は変更せず、 新しい状態を作成
2023年末時点のRedux
Reduxの公式ドキュメントが充実している • https://redux.js.org/ • チュートリアルで開発に必要な基本概念の把握ができる • 学習コンテンツの紹介も含まれている ◦ Mark Erikson本人がRedux
Toolkit(後述)を使ったReduxでの開発を説明している YouTube動画 ▪ Let’s Learn Modern Redux! (with Mark Erikson) — Learn With Jason - YouTube
React-Redux
React-Redux • Redux公式のReactバインディング ◦ ReactコンポーネントにReduxで管理している状 態を渡す • よく使うAPI ◦ Provider
▪ コンポーネントツリー全体で Redux Storeを 使えるようにする ◦ useSelector() ▪ Redux Storeから状態をとりだす ◦ useDispatch() ▪ アクションをRedux Storeに送信する • リリース ◦ 2015-08-25 v1.0.0 ◦ 2019-06-19 v7.1.0 ◦ 2023-12-04 v9.0.0
React-Redux • Redux公式のReactバインディング ◦ ReactコンポーネントにReduxで管理している状 態を渡す • よく使うAPI ◦ Provider
▪ コンポーネントツリー全体で Redux Storeを 使えるようにする ◦ useSelector() ▪ Redux Storeから状態をとりだす ◦ useDispatch() ▪ アクションをRedux Storeに送信する • リリース ◦ 2015-08-25 v1.0.0 ◦ 2019-06-19 v7.1.0 ◦ 2023-12-04 v9.0.0
React-Redux • Redux公式のReactバインディング ◦ ReactコンポーネントにReduxで管理している状 態を渡す • よく使うAPI ◦ Provider
▪ コンポーネントツリー全体で Redux Storeを 使えるようにする ◦ useSelector() ▪ Redux Storeから状態をとりだす ◦ useDispatch() ▪ アクションをRedux Storeに送信する • リリース ◦ 2015-08-25 v1.0.0 ◦ 2019-06-19 v7.1.0 ◦ 2023-12-04 v9.0.0
React-Redux • Redux公式のReactバインディング ◦ ReactコンポーネントにReduxで管理している状 態を渡す • よく使うAPI ◦ Provider
▪ コンポーネントツリー全体で Redux Storeを 使えるようにする ◦ useSelector() ▪ Redux Storeから状態をとりだす ◦ useDispatch() ▪ アクションをRedux Storeに送信する • リリース ◦ 2015-08-25 v1.0.0 ◦ 2019-06-19 v7.1.0 ◦ 2023-12-04 v9.0.0
React-Redux • Redux公式のReactバインディング ◦ ReactコンポーネントにReduxで管理している状 態を渡す • よく使うAPI ◦ Provider
▪ コンポーネントツリー全体で Redux Storeを 使えるようにする ◦ useSelector() ▪ Redux Storeから状態をとりだす ◦ useDispatch() ▪ アクションをRedux Storeに送信する • リリース ◦ 2015-08-25 v1.0.0 ◦ 2019-06-19 v7.1.0 ← React hooks対応 ◦ 2023-12-04 v9.0.0
React hooksですっきり https://chat.openai.com/share/14818405-a0e3-499f-beeb-b6a7898dc6b9
Redux Toolkit
Redux Toolkit • 公式のツールセット ◦ Redux開発を適切かつ強力に推進できる • よく使うAPI ◦ configureStore()
◦ createSlice() • リリース ◦ 2019-10-23 v1.0.0 ◦ 2023-12-04 v2.0.0 • その他 ◦ RTK Query ▪ データ取得、キャッシュツール
Slice https://redux-toolkit.js.org/tutorials/quick-start Slice Store • Slice ◦ Redux Storeで管理する状態の一部分 ◦
state, reducer, actions がっちゃんこ • 効果 ◦ Action CreatorとAction Type削減 ▪ ボイラーテンプレート管理不要 ▪ 見通しがよくなる
Slice (大事なところ抜粋) • Slice ◦ Redux Storeで管理する状態の一部分 ◦ state, reducer,
actions がっちゃんこ • 効果 ◦ Action CreatorとAction Type削減 ▪ ボイラーテンプレート管理不要 ▪ 見通しがよくなる https://redux-toolkit.js.org/tutorials/quick-start Store Slice Sliceが増えたらここに Reducerを追加 SliceからReducerや actionsを取り出して export SliceからReducerや actionsを取り出して export
Slice導入前後比較 Action Type Action Creator Reducer https://chat.openai.com/share/a3f9dedd-9323-450f-852c-46df34629ae3 Slice 処理部分は赤枠部分
Sliceのreducersに違和感 • イミュ―タビリティどこ いった? https://redux-toolkit.js.org/tutorials/quick-start
Immer • Immerによって不変担保 ◦ イミュータブルな更新ロジックを肩代わ りしてくれるライブラリ ◦ https://github.com/immerjs/immer • 最初は違和感はあった
• アプリケーションで実現したいことに 注力 https://redux-toolkit.js.org/usage/immer-reducers
Redux 5.0, React-Redux 9.0 & RTK 2.0 is released 🎉
• 2023-12-04 リリース • 主な変更 ◦ Redux の内部的な変更 ◦ RTKの主な機能追加 ▪ createSliceにselectorを定義できるように なった ▪ 非同期処理(thunk)を createSlice.reducersに書けるように • 移行ガイドを公式提供 ◦ https://redux.js.org/usage/migrations/migratin g-rtk-2 ◦ 上で書いたこと全部書いてある • https://twitter.com/acemarke/status/1731681389202870640 • https://twitter.com/acemarke/status/1731681398967128137 • https://twitter.com/acemarke/status/1731681395875979723
Reduxのダウンロード数の推移
2023年末時点、Reduxのダウンロード数は多い https://npmtrends.com/jotai-vs-mobx-vs-react-query-vs-recoil-vs-redux-vs-swr-vs-xstate
2023年末時点、Reduxのダウンロード数は多い https://npmtrends.com/jotai-vs-mobx-vs-react-query-vs-recoil-vs-redux-vs-swr-vs-xstate 他の状態管理、データフェッ チライブラリよりも利用されて いそう
2023年末時点、ReduxはNext.jsよりもダウンロードされている https://npmtrends.com/jotai-vs-mobx-vs-next-vs-react-query-vs-recoil-vs-redux-vs-swr-vs-xstate
https://npmtrends.com/jotai-vs-mobx-vs-next-vs-react-query-vs-recoil-vs-redux-vs-swr-vs-xstate 2023年末時点、ReduxはNext.jsよりもダウンロードされている ReduxはNext.jsよりも利用さ れていそう? (マサカリとんできそう)
2023年でReduxダウンロード数は頭打ち https://npmtrends.com/jotai-vs-mobx-vs-next-vs-react-query-vs-recoil-vs-redux-vs-swr-vs-xstate 採用されなくなっている?
ところで、Reactの公式では https://ja.react.dev/learn/start-a-new-react-project
ところで、Reactの公式では https://ja.react.dev/learn/start-a-new-react-project
ところで、Reactの公式では https://ja.react.dev/learn/start-a-new-react-project
ところで、Reactの公式では https://ja.react.dev/learn/start-a-new-react-project
ところで、Reactの公式では https://ja.react.dev/learn/start-a-new-react-project
ところで、Reactの公式では https://ja.react.dev/learn/start-a-new-react-project
ところで、Reactの公式では https://ja.react.dev/learn/start-a-new-react-project
ところで、Reactの公式では https://ja.react.dev/learn/start-a-new-react-project
ところで、Reactの公式では https://ja.react.dev/learn/start-a-new-react-project 😇 フレームワークわからん \(^o^)/オワタ
Reduxのダウンロードが伸びていないことへの考察 • Next.js / Remix等の登場でSPA以外の構成をとりやすくなった ◦ ユースケースにあった適切な選択ができるようになった ◦ Reduxは何でもそつなくできるやつ •
フレームワーク使うのが普通になった ◦ 公式がプロジェクト開始時フレームワークを推奨している ◦ とりあえずRedux使うということがなくなった • フレームワークの中でのRedux活用方法を(私が)知らない ◦ もしかしてみんなも知らない?
まとめ 2023年末時点のRedux • 公式ドキュメント充実 ◦ https://redux.js.org/ ◦ https://react-redux.js.org/ ◦ https://redux-toolkit.js.org/
• React-ReduxはReact Hooksの登場で使いやすくなった • Reduxは、Redux Toolkit(RTK)と一緒に使う ◦ いい感じにReduxを使える ◦ 自分たちの実現したい処理に集中できる ▪ 基本的にSlice周辺を気にすればよい • Redux 5.0 & React-Redux 9.0 & RTK 2.0 が2023-12-04にリリースされた • Reduxは他の状態管理ライブラリよりダウンロード数が多い ◦ ただし、2023年のダウンロード数は伸びていない。 ◦ ユースケースに合う他の選択肢が定着してきた