このページは PageTurner AI で翻訳されました(ベータ版)。プロジェクト公式の承認はありません。 エラーを見つけましたか? 問題を報告 →
学習リソース
Reduxドキュメントは、Reduxの基本概念を教えるとともに、実践的なアプリケーションで使用するための主要な概念を説明することを目的としています。しかし、ドキュメントですべてを網羅することはできません。幸いにも、Reduxを学ぶための優れた外部リソースが数多く存在します。ぜひこれらをチェックすることをお勧めします。多くのリソースはドキュメントの範囲を超えるトピックを扱っていたり、同じトピックを異なる方法で説明しており、あなたの学習スタイルに合うかもしれません。
このページでは、Reduxを学ぶために利用できる優れた外部リソースの中から特におすすめのものを紹介します。React、Redux、Javascriptおよび関連トピックに関するチュートリアル、記事、その他のリソースの追加リストについては、React/Reduxリンク集をご覧ください。
基本紹介
Reduxの基本概念と使用方法を教えるチュートリアル
-
React、Redux、TypeScript入門
https://blog.isquaredsoftware.com/2020/12/presentations-react-redux-ts-intro/
ReduxメンテナーのMark Eriksonによるスライドセット。React、Redux、TypeScriptの基本をカバーしています。Reduxトピックにはストア、リデューサー、ミドルウェア、React-Redux、Redux Toolkitが含まれます。 -
モダンReduxを学ぶ - Redux Toolkit、React-Redux Hooks、RTK Query
https://www.learnwithjason.dev/let-s-learn-modern-redux
"Learn with Jason"のエピソードで、ReduxメンテナーのMark Eriksonがゲスト出演。ライブコーディングアプリを特徴とし、新しいReact+TSプロジェクトの作成、Reduxパッケージの追加、Redux ToolkitとReact-Reduxのスクラッチ設定(推奨TSフック設定を含む)を実演。また、今後のRTK Queryデータ取得APIの使用方法とUIでのデータ表示方法も紹介。 -
Reduxチュートリアル: 概要と実践ガイド
https://www.taniarascia.com/redux-react-guide/
Tania Rasciaによる明快なチュートリアル。主要なRedux概念を簡潔に説明し、vanilla ReduxとRedux Toolkitを使用した基本的なRedux+Reactアプリの構築方法を実演。 -
初心者のためのRedux - 脳に優しいRedux学習ガイド
https://www.freecodecamp.org/news/redux-for-beginners-the-brain-friendly-guide-to-redux/
分かりやすいチュートリアル。Redux ToolkitとReact-Reduxを使用した小さなTodoアプリを構築(データ取得を含む)。 -
Redux ToolkitとTypeScriptで簡単Redux
https://www.mattbutton.com/redux-made-easy-with-redux-toolkit-and-typescript/
Redux ToolkitとTypeScriptを組み合わせてReduxアプリケーションを作成する方法、およびRTKが標準的なReduxの使用をどのように簡素化するかを示す有益なチュートリアル。 -
Redux: Twitterの話題から本番環境へ
https://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/
視覚的に優れたスライドショー。Reduxの核心概念、Reactとの連携、プロジェクト構成、thunksやsagasを使った副作用処理をステップバイステップで解説。React+Reduxアーキテクチャにおけるデータフローをデモンストレーションするアニメーションダイアグラムを含む。
ReactとReduxの連携
React-Reduxバインディングライブラリの解説
-
レガシーReduxアプリケーションをReact-Redux Hooksで近代化
https://app.egghead.io/playlists/modernizing-a-legacy-redux-application-with-react-hooks-c528
従来のconnectAPIと新しいReact-ReduxフックAPIの違いを示し、コンポーネントでこれらのフックを使用する方法を解説するビデオシリーズ。 -
ReactアプリでReduxが有用な理由
https://www.fullstackreact.com/articles/redux-with-mark-erikson/
ReactとReduxを連携させる利点についての解説。コンポーネント間でのデータ共有やホットモジュールリロードなどが含まれます。
プロジェクトベースのチュートリアル
プロジェクトを構築しながらReduxの概念を学べるチュートリアル(大規模な「実世界」タイプのアプリケーションを含む)
- Practical Redux
https://blog.isquaredsoftware.com/2016/10/practical-redux-part-0-introduction/
https://blog.isquaredsoftware.com/series/practical-redux/
Battletechキャンペーン管理用MekHQアプリケーションをベースにしたサンプルアプリケーション構築を通じて、特定のReduxテクニックを実演する連載記事。Redux共同メンテナーのMark Eriksonが執筆。リレーショナルデータ管理、複数コンポーネント/リスト接続、機能別複雑リデューサーロジック、フォーム処理、モーダルダイアログ表示などを網羅。(注:これは古いシリーズであり、現在推奨する新しいパターンとは異なりますが、基本原理の多くは今でも有効です)
Redux実装
ミニチュア再実装を作成しながらReduxの内部動作を解説する
-
Getting Started with Redux - ビデオシリーズ
https://egghead.io/courses/fundamentals-of-redux-course-from-dan-abramov-bd5cc867
https://github.com/tayiorbeii/egghead.io_redux_course_notes
Redux作成者Dan Abramovが30本の短編ビデオ(各2-5分)でコンセプトを実演。Githubリポジトリにはビデオのノートと書き起こしを収録 -
Building React Applications with Idiomatic Redux - ビデオシリーズ
https://egghead.io/courses/building-react-applications-with-idiomatic-redux
https://github.com/tayiorbeii/egghead.io_idiomatic_redux_course_notes
Dan Abramovの第二弾チュートリアル。ストア初期状態、React Router連携、「セレクター」関数、状態正規化、Reduxミドルウェア、非同期アクションクリエーターなどを解説。Githubリポジトリにノートと書き起こしを収録 -
Live React: Hot Reloading and Time Travel
https://youtube.com/watch?v=xsSnOQynTHs
Reduxを初めて紹介したDan Abramovのカンファレンス講演。Reduxの制約がタイムトラベル付きホットリローディングを可能にする仕組みを解説 -
Build Yourself a Redux
https://zapier.com/engineering/how-to-build-redux/
Reduxコアに加えconnectやミドルウェアも網羅した「ミニRedux構築」の詳細記事 -
Connect.js explained
https://gist.github.com/gaearon/1d19088790e70ac32ea636c025ba424e
React Reduxのconnect()関数の基本実装を解説する極限まで簡略化したバージョン -
Let's Write Redux!
https://www.jamasoftware.com/blog/lets-write-redux/
Reduxのミニチュア版を段階的に作成しながらコンセプトと実装を解説
リデューサー
リデューサー関数の記述方法を議論する記事
-
Taking Advantage of
combineReducers
https://randycoulman.com/blog/2016/11/22/taking-advantage-of-combinereducers/
状態ツリー構築のためのcombineReducers複数活用例と、各種リデューサーロジック手法のトレードオフ考察 -
The Power of Higher-Order Reducers
https://slides.com/omnidan/hor#/
redux-undo作者による高階リデューサー概念と活用方法のスライド解説 -
Reducer composition with Higher Order Reducers
https://medium.com/@mange_vibration/reducer-composition-with-higher-order-reducers-35c3977ed08f
初期状態提供、フィルタリング、特定キー更新など、大規模リデューサータスクを実現する合成可能な小関数作成例 -
Higher Order Reducers - It just sounds scary
https://medium.com/@danielkagan/high-order-reducers-it-just-sounds-scary-2b9e5dbfc705
レデューサーをレゴブロックのように組み合わせる方法を解説。再利用可能でテスト可能なロジック構築が可能になります。
セレクター
ステートから値を取得するセレクター関数の使用方法と重要性
-
Idiomatic Redux: Using Reselect Selectors for Encapsulation and Performance
https://blog.isquaredsoftware.com/2017/12/idiomatic-redux-using-reselect-selectors/
Reduxでセレクター関数を使うべき理由、Reselectライブラリを使った最適化方法、パフォーマンス改善の高度なテクニックを網羅した完全ガイド。 -
ReactCasts #8: Selectors in Redux
https://www.youtube.com/watch?v=frT3to2ACCw
ストアからデータを取得するセレクター関数の意義と実践手法、ストア値から派生データを生成する方法をわかりやすく解説。 -
Optimizing React Redux Application Development with Reselect
https://codebrahma.com/reselect-tutorial-optimizing-react-redux-application-development-with-reselect/
Reselectの実践的チュートリアル。「セレクター関数」の概念、Reselect APIの活用方法、メモ化によるパフォーマンス改善を解説。 -
Usage of Reselect in a React-Redux Application
https://dashbouquet.com/blog/frontend-development/usage-of-reselect-in-a-react-redux-application
パフォーマンス向上のためのメモ化セレクターの重要性と、Reselectを効果的に使用するベストプラクティスを考察。 -
React, Reselect, and Redux
https://medium.com/@parkerdan/react-reselect-and-redux-b34017f8194c
Reselectのメモ化セレクターがReduxアプリで有用な理由と、コンポーネントごとに固有のセレクターインスタンスを作成する方法を解説。
正規化
データベースのようにReduxストアを構造化して最高のパフォーマンスを実現する方法
-
Querying a Redux Store
https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f
データの正規化やセレクター関数の使用を含む、Reduxでのデータ整理と保存のベストプラクティスを考察。 -
Normalizing Redux Stores for Maximum Code Reuse
https://medium.com/@adamrackis/normalizing-redux-stores-for-maximum-code-reuse-ae6e3844ae95
正規化されたReduxストアが可能にする有用なデータ処理アプローチと、セレクター関数を使った階層データの非正規化実例を紹介。 -
Advanced Redux Entity Normalization
https://medium.com/@dcousineau/advanced-redux-entity-normalization-f5f1fe2aefc5
SQLの「ビュー」に類似した「keyWindow」コンセプトでエンティティのサブセットを追跡する手法を提案。正規化データの有用な拡張方法。
ミドルウェア
ミドルウェアの動作原理と実装方法の解説と実例
-
Exploring Redux Middlewares
https://blog.krawaller.se/posts/exploring-redux-middleware/
小規模な実験を通してミドルウェアの動作を理解する方法。 -
Redux Middleware Tutorial
https://github.com/pshrmn/notes/blob/master/redux/redux-middleware.md
ミドルウェアの概念、applyMiddlewareの動作原理、カスタムミドルウェアの実装方法を概説。 -
ReactCasts #6: Redux Middleware
https://www.youtube.com/watch?v=T-qtHI1qHIg
Reduxにおけるミドルウェアの位置付け、用途、カスタムミドルウェアの実装方法をスクリーンキャストで解説。 -
Reduxミドルウェア入門ガイド
https://www.codementor.io/reactjs/tutorial/beginner-s-guide-to-redux-middleware
ミドルウェアのユースケースを豊富な例と共に解説 -
Javascriptにおける関数合成
https://joecortopassi.com/articles/functional-composition-in-javascript/
compose関数の動作原理を詳細に解説
副作用 - 基礎
Reduxでの非同期処理の基本解説
-
Stack Overflow: タイムアウト付きReduxアクションのディスパッチ
https://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559
Dan AbramovによるReduxでの非同期処理管理の基本解説(インライン非同期呼び出し、非同期アクションクリエイター、サンクミドルウェアなど段階的なアプローチ) -
Stack Overflow: Reduxで非同期フローにミドルウェアが必要な理由
https://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in-redux/34599594#34599594
Dan Abramovがサンクと非同期ミドルウェアの必要性を説明し、有用なパターンを紹介 -
「サンク」とは何か?
https://daveceddia.com/what-is-a-thunk/
「サンク」という用語の一般的な意味とReduxにおける具体的な意味を簡潔に解説 -
Reduxにおけるサンク:基本概念
https://medium.com/fullstack-academy/thunks-in-redux-the-basics-85e538a3fe60
サンクの概念、解決する課題、実装方法を詳細に解説
副作用 - 応用
非同期処理管理の高度な手法とツール
-
Reduxで非同期操作を実装する正しい方法
https://decembersoft.com/posts/what-is-the-right-way-to-do-asynchronous-operations-in-redux/
主要な副作用管理ライブラリを比較分析し、各手法の動作原理を解説 -
Redux実装4方式
https://medium.com/react-native-training/redux-4-ways-95a130da0cdc
基本データ取得をサンク、サガ、Observable、Promiseミドルウェアで実装した比較検証 -
慣用的Redux:サンク・サガ・抽象化・再利用性に関する考察
https://blog.isquaredsoftware.com/2017/01/idiomatic-redux-thoughts-on-thunks-sagas-abstraction-and-reusability/
「サンクは悪」という主張への反論。複雑な同期ロジックや非同期副作用管理におけるサンク/サガの有効性を主張 -
Javascriptパワーツール:Redux-Saga
https://formidable.com/blog/2017/javascript-power-tools-redux-saga/
https://formidable.com/blog/2017/composition-patterns-in-redux-saga/
https://formidable.com/blog/2017/real-world-redux-saga-patterns/
Redux-Sagaの概念・実装・利点を包括的に解説。ES6ジェネレーターによる制御フロー、サガの合成による並行処理、実践的ユースケースを網羅 -
Reduxサガの探求
https://medium.com/onfido-tech/exploring-redux-sagas-cc1fca2015ee
Reduxアプリケーションでサガを使用し、ビジネスロジックを分離実装する接着層としての活用方法を考察 -
SagaでReduxを制御する
https://objectpartners.com/2017/11/20/taming-redux-with-sagas/
Redux-Sagaの包括的な解説。ジェネレーター関数の説明、Sagaのユースケース、Promise処理におけるSagaの活用方法、テスト手法などが含まれています。 -
RxJSによるリアクティブなReduxステート管理
https://ivanjov.com/reactive-redux-state-with-rxjs/
「リアクティブプログラミング」の概念とRxJSライブラリについて解説。redux-observableを使ったデータ取得方法とテスト例を紹介。 -
Reduxの非同期処理にredux-observableを活用する
https://medium.com/dailyjs/using-redux-observable-to-handle-asynchronous-logic-in-redux-d49194742522
ライン描画の実装例を、thunkベースとobservableベースで比較した詳細な記事。
Redux的思考法
Reduxの設計思想と動作原理に関する深い考察
- Reduxを選ぶべき時(そして選ばないべき時)
https://changelog.com/posts/when-and-when-not-to-reach-for-redux
ReduxメンテナーMark Eriksonが、Reduxが解決する課題と他ツールとの比較を解説。
-
Reduxが必要ないかもしれないケース
https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
Dan AbramovによるRedux採用時のトレードオフの考察。 -
慣用的Redux:Reduxの道 Part 1 - 実装と意図
https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-1/
Reduxの動作メカニズム、設計思想、使用時の制約条件に関する深い分析。 -
慣用的Redux:Reduxの道 Part 2 - 実践と哲学
https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-2/
一般的なReduxパターンの存在理由、代替使用方法、各アプローチの長所短所についての続編。 -
Reduxの真価とは?
https://medium.freecodecamp.org/whats-so-great-about-redux-ac16f1cc0f8b
ReduxとOOP/メッセージパッシングの比較分析。ボイラープレート増加の問題点や初学者向け高レベル抽象化の必要性についての示唆に富む論考。
Reduxアーキテクチャ
大規模Reduxアプリケーションの構造設計パターンとプラクティス
-
アプリ状態設計における偶発的複雑性の回避
https://hackernoon.com/avoiding-accidental-complexity-when-structuring-your-app-state-6e6d22ad5e2a
Reduxストア構造を設計するための優れたガイドライン集。 -
実践的Redux:実アプリケーションのための堅牢なワークフロー
https://hackernoon.com/redux-step-by-step-a-simple-and-robust-workflow-for-real-life-apps-1fdf7df46092
「偶発的複雑性」記事の続編。設計原則に... -
Reduxについて知っておきたかったこと
https://medium.com/horrible-hacks/things-i-wish-i-knew-about-redux-9924abf2f9e0
https://www.reddit.com/r/javascript/comments/4taau2/things_i_wish_i_knew_about_redux/
Reduxアプリ開発で得られた貴重な知見とベストプラクティス。コンポーネント接続、データ選択、アプリ構造設計に関する情報を含みます。Redditでの追加議論も参照できます。 -
React+Redux: クリーンで信頼性が高く保守しやすいコードのためのヒントとベストプラクティス
https://speakerdeck.com/goopscoop/react-plus-redux-tips-and-best-practices-for-clean-reliable-and-scalable-code
アクションクリエイターの簡素化、リデューサー内でのデータ操作、API呼び出しの抽象化、propsのスプレッド回避など、多岐にわたる実践的アドバイスを提供する優れたスライド資料。 -
大規模Webアプリケーションにおける状態管理のためのRedux
https://blog.mapbox.com/redux-for-state-management-in-large-web-apps-c7f3fab3ce9b
Reduxの慣用的なアーキテクチャと、Mapbox Studioアプリケーションへの適用方法に関する優れた考察と実装例。
アプリケーションと実装例
-
React-Redux RealWorld Example: TodoMVCの実装
https://github.com/GoThinkster/redux-review
JWT認証、CRUD操作、記事のお気に入り登録、ユーザーフォロー、ルーティングなどを備えたMedium風ブログサイトのフルスタック実装。RealWorldプロジェクトでは同一API仕様に対する様々なクライアント/サーバー実装を比較できます。 -
Project Mini-Mek
https://github.com/markerikson/project-minimek
様々な実用的なReduxテクニックをデモンストレーションするサンプルアプリであり、https://blog.isquaredsoftware.com/series/practical-redux のPractical Reduxシリーズと連動する -
react-redux-yelp-clone
https://github.com/mohamed-ismat/react-redux-yelp-clone
FullStackReactの「Yelpクローン」をReduxとRedux Sagaで拡張。React Router v4、styled-componentsなどを採用したモダンな実装で、React-Boilerplateをベースにしています。 -
WordPress-Calypso
https://github.com/Automattic/wp-calypso
JavaScriptとAPIで構築された新しいWordPress.com -
Sound-Redux
https://github.com/andrewngu/sound-redux
React/Redux製のSoundcloudクライアント -
Webamp
https://webamp.org
https://github.com/captbaritone/webamp
ReactとReduxで構築されたWinamp2のブラウザ再現版。実際にMP3を再生可能で、ローカルMP3ファイルの読み込みをサポート。 -
Tello
https://github.com/joshwcomeau/Tello
TV番組の追跡・管理をシンプルに楽しくするツール -
io-808
https://github.com/vincentriemer/io-808
TR-808ドラムマシンの完全なウェブベース再現プロジェクト
Reduxドキュメントの翻訳版
-
中文文档 — 中国語(簡体字)
-
繁體中文文件 — 中国語(繁体字)
-
Redux in Russian — ロシア語
-
Redux en Español - スペイン語
-
韓国語版 Redux - 韓国語
書籍
-
Redux in Action
https://www.manning.com/books/redux-in-action
Reduxの利用における主要な側面を包括的に解説する書籍。リデューサーとアクションの基本からReact連携、複雑なミドルウェアと副作用、アプリケーション構造、パフォーマンス、テストまでを網羅。Redux利用の多様なアプローチについて、メリット・デメリットやトレードオフを明確に説明。Redux共同メンテナーのMark Eriksonが個人推奨。 -
The Complete Redux Book
https://leanpub.com/redux-book
大規模なステート管理方法、ストアエンハンサーの必要性、フォーム検証のベストプラクティスなど、実践的な疑問に回答。シンプルな用語とサンプルコードで、複雑なWebアプリケーション構築に必要なReduxの知識を習得(注:現在は永久無料)。 -
Taming the State in React
https://www.robinwieruch.de/learn-react-redux-mobx-state-management/
著者による前著『The Road to learn React』を学んだ読者に最適。Reactなしの純粋なReduxから始め、Reactアプリケーションとの連携方法を解説。高度な章では正規化、命名規則、セレクター、非同期アクションを扱い、最終的にReact+Reduxによる実践アプリケーション構築を実装。
コース
-
Modern React with Redux, by Stephen Grider(有料)
https://www.udemy.com/react-redux/
React Router、Webpack、ES2015を活用したアプリ開発を通じて、ReactとReduxの基礎を習得。Reactコンポーネントの深い理解とReduxによるアプリケーション構造設計の中核知識を効率的に学習。 -
Redux, by Tyler McGinnis(有料)
https://tylermcginnis.com/courses/redux/
学習には十分な規模のアプリケーション環境が不可欠。本コースは「実践的Redux」とも呼べる内容で、Todoリストを超えた現実世界のアプリケーションを構築。楽観的更新やエラーハンドリングなど実践的ケーススタディを網羅。Reduxと相性の良いFirebaseやCSS Modulesも併せて解説。 -
Learn Redux, by Wes Bos(無料)
https://learnredux.com/
「Reduxstagram」フォトアプリの構築を通じて、Redux・React Router・React.jsの核心理念を視覚的に習得するビデオコース。
その他のリソース
-
React-Redux リンク集 - React、Redux、ES2015などに関する高品質な記事やチュートリアルの厳選リスト。
-
Redux エコシステムリンク - カテゴリ別に整理されたRedux関連ライブラリ・アドオン・ユーティリティのコレクション。
-
Awesome Redux - Redux関連リポジトリの包括的なリスト。
-
DEV Community - Reduxプロジェクトや記事の共有、ディスカッション開始、フィードバック募集の場。あらゆるスキルレベルの開発者が参加可能。