メインコンテンツへスキップ
非公式ベータ版翻訳

このページは 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の概念を学べるチュートリアル(大規模な「実世界」タイプのアプリケーションを含む)

  • 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の内部動作を解説する

リデューサー

リデューサー関数の記述方法を議論する記事

セレクター

ステートから値を取得するセレクター関数の使用方法と重要性

正規化

データベースのようにReduxストアを構造化して最高のパフォーマンスを実現する方法

ミドルウェア

ミドルウェアの動作原理と実装方法の解説と実例

副作用 - 基礎

Reduxでの非同期処理の基本解説

副作用 - 応用

非同期処理管理の高度な手法とツール

Redux的思考法

Reduxの設計思想と動作原理に関する深い考察

Reduxアーキテクチャ

大規模Reduxアプリケーションの構造設計パターンとプラクティス

アプリケーションと実装例

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プロジェクトや記事の共有、ディスカッション開始、フィードバック募集の場。あらゆるスキルレベルの開発者が参加可能。