2023年末時点のReduxをざっくり知る

ゆるWeb勉強会@札幌 #25 のLT資料です
https://mild-web-sap.connpass.com/event/298899/

Transcript

1. 2023年末時点の Reduxをざっくり知る ゆるWeb＠札幌 #25 nmemoto
2. 自己紹介 • パッケージベンダー所属(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
3. Connpassより
4. なんで（いまさら）Redux？ちゃんと語れる？ • なんでRedux？ ◦ 業務で使うことになった ◦ 調べてみると最近の Redux良いのではと思った • ちゃんと語れる？ ◦ React を前提とした話をしてしまうのでわからない人いるかも ◦ 私の理解度で”ちゃんと”は難しいかも ◦ 自分なりの解釈で公式ドキュメントと違う言葉を使ってしまうかもしれないです ◦ 興味を持ったら公式ドキュメントを見て！
5. おしながき • 自己紹介(5分) • Reduxの基本概念(20分) • 2023年末時点のRedux(20分) • まとめ(5分)
6. おしながき • 自己紹介(5分) • Reduxの基本概念(20分) • 2023年末時点のRedux(20分) • まとめ(5分) これ全部足したら50分なのでは？
7. おしながき • 自己紹介(30秒) • Reduxの基本概念(2分) • 2023年末時点のRedux(2分) • まとめ(30秒) 10倍界王拳で頑張ります！(多分無理) https://www.irasutoya.com/2018/07/blog-post_876.html
8. 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/ の上部
9. Reduxの基本概念
10. 状態管理をいい感じにするためのReduxの概念 • 一方向のデータフローの制御 • 状態管理に関する概念分離 ◦ 概念(用語) ▪ Actions ▪ Action Creators ▪ Reducers ▪ Store ▪ Dispatch ▪ Selectors ◦ ViewとStateの独立性を維持するルール • 状態を一元管理 • イミュータビリティ https://redux.js.org/tutorials/essentials/part-1-overview-concepts#state-management
11. 状態管理をいい感じにするためのReduxの概念 https://redux.js.org/tutorials/essentials/part-1-overview-concepts#state-management • 一方向のデータフローの制御 • 状態管理に関する概念分離 ◦ 概念(用語) ▪ Actions ▪ Action Creators ▪ Reducers ▪ Store ▪ Dispatch ▪ Selectors ◦ ViewとStateの独立性を維持するルール • 状態を一元管理 • イミュータビリティ ユーザー入力に基づいてアプリで発生するイ ベント、および状態の更新をトリガー アプリを動かす信頼で きる情報源 現在の状態に基づくUI の宣言的な記述
12. 状態管理をいい感じにするためのReduxの概念 https://redux.js.org/tutorials/essentials/part-1-overview-concepts#state-management • 一方向のデータフローの制御 • 状態管理に関する概念分離 ◦ 概念(用語) ▪ Actions ▪ Action Creators ▪ Reducers ▪ Store ▪ Dispatch ▪ Selectors ◦ ViewとStateの独立性を維持するルール • 状態を一元管理 • イミュータビリティ
13. 状態管理をいい感じにするためのReduxの概念 https://redux.js.org/tutorials/essentials/part-1-overview-concepts#state-management • 一方向のデータフローの制御 • 状態管理に関する概念分離 ◦ 概念(用語) ▪ Actions ▪ Action Creators ▪ Reducers ▪ Store ▪ Dispatch ▪ Selectors ◦ ViewとStateの独立性を維持するルール • 状態を一元管理 • イミュータビリティ 状態を分けて管理しない →状態管理の複雑度を上げない • 予測可能な状態変更 • 機能追加・変更容易性 • デバッグしやすさ
14. 状態管理をいい感じにするためのReduxの概念 https://redux.js.org/tutorials/essentials/part-1-overview-concepts#state-management • 一方向のデータフローの制御 • 状態管理に関する概念分離 ◦ 概念(用語) ▪ Actions ▪ Action Creators ▪ Reducers ▪ Store ▪ Dispatch ▪ Selectors ◦ ViewとStateの独立性を維持するルール • 状態を一元管理 • イミュータビリティ 既存の状態は変更せず、 新しい状態を作成
15. 2023年末時点のRedux
16. Reduxの公式ドキュメントが充実している • https://redux.js.org/ • チュートリアルで開発に必要な基本概念の把握ができる • 学習コンテンツの紹介も含まれている ◦ Mark Erikson本人がRedux Toolkit(後述)を使ったReduxでの開発を説明している YouTube動画 ▪ Let’s Learn Modern Redux! (with Mark Erikson) — Learn With Jason - YouTube
17. React-Redux
18. 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
19. 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
20. 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
21. 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
22. 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
23. React hooksですっきり https://chat.openai.com/share/14818405-a0e3-499f-beeb-b6a7898dc6b9
24. Redux Toolkit
25. Redux Toolkit • 公式のツールセット ◦ Redux開発を適切かつ強力に推進できる • よく使うAPI ◦ configureStore() ◦ createSlice() • リリース ◦ 2019-10-23 v1.0.0 ◦ 2023-12-04 v2.0.0 • その他 ◦ RTK Query ▪ データ取得、キャッシュツール
26. Slice https://redux-toolkit.js.org/tutorials/quick-start Slice Store • Slice ◦ Redux Storeで管理する状態の一部分 ◦ state, reducer, actions がっちゃんこ • 効果 ◦ Action CreatorとAction Type削減 ▪ ボイラーテンプレート管理不要 ▪ 見通しがよくなる
27. 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
28. Slice導入前後比較 Action Type Action Creator Reducer https://chat.openai.com/share/a3f9dedd-9323-450f-852c-46df34629ae3 Slice 処理部分は赤枠部分
29. Sliceのreducersに違和感 • イミュ―タビリティどこ いった？ https://redux-toolkit.js.org/tutorials/quick-start
30. Immer • Immerによって不変担保 ◦ イミュータブルな更新ロジックを肩代わ りしてくれるライブラリ ◦ https://github.com/immerjs/immer • 最初は違和感はあった • アプリケーションで実現したいことに 注力 https://redux-toolkit.js.org/usage/immer-reducers
31. 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
32. Reduxのダウンロード数の推移
33. 2023年末時点、Reduxのダウンロード数は多い https://npmtrends.com/jotai-vs-mobx-vs-react-query-vs-recoil-vs-redux-vs-swr-vs-xstate
34. 2023年末時点、Reduxのダウンロード数は多い https://npmtrends.com/jotai-vs-mobx-vs-react-query-vs-recoil-vs-redux-vs-swr-vs-xstate 他の状態管理、データフェッ チライブラリよりも利用されて いそう
35. 2023年末時点、ReduxはNext.jsよりもダウンロードされている https://npmtrends.com/jotai-vs-mobx-vs-next-vs-react-query-vs-recoil-vs-redux-vs-swr-vs-xstate
36. 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よりも利用さ れていそう？ (マサカリとんできそう)
37. 2023年でReduxダウンロード数は頭打ち https://npmtrends.com/jotai-vs-mobx-vs-next-vs-react-query-vs-recoil-vs-redux-vs-swr-vs-xstate 採用されなくなっている？
38. ところで、Reactの公式では https://ja.react.dev/learn/start-a-new-react-project
39. ところで、Reactの公式では https://ja.react.dev/learn/start-a-new-react-project
40. ところで、Reactの公式では https://ja.react.dev/learn/start-a-new-react-project
41. ところで、Reactの公式では https://ja.react.dev/learn/start-a-new-react-project
42. ところで、Reactの公式では https://ja.react.dev/learn/start-a-new-react-project
43. ところで、Reactの公式では https://ja.react.dev/learn/start-a-new-react-project
44. ところで、Reactの公式では https://ja.react.dev/learn/start-a-new-react-project
45. ところで、Reactの公式では https://ja.react.dev/learn/start-a-new-react-project
46. ところで、Reactの公式では https://ja.react.dev/learn/start-a-new-react-project 😇 フレームワークわからん ＼(^o^)／ｵﾜﾀ
47. Reduxのダウンロードが伸びていないことへの考察 • Next.js / Remix等の登場でSPA以外の構成をとりやすくなった ◦ ユースケースにあった適切な選択ができるようになった ◦ Reduxは何でもそつなくできるやつ • フレームワーク使うのが普通になった ◦ 公式がプロジェクト開始時フレームワークを推奨している ◦ とりあえずRedux使うということがなくなった • フレームワークの中でのRedux活用方法を(私が)知らない ◦ もしかしてみんなも知らない？
48. まとめ 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年のダウンロード数は伸びていない。 ◦ ユースケースに合う他の選択肢が定着してきた