メインコンテンツにスキップ

学習リソース

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フック、RTK Query
    https://www.learnwithjason.dev/let-s-learn-modern-redux
    ReduxメンテナーのMark Eriksonがゲストとして出演する「Learn with Jason」番組のエピソード。このエピソードでは、ライブコーディングされたアプリを特集し、新しいReact+TSプロジェクトを作成し、Reduxパッケージを追加し、Redux ToolkitとReact-Reduxを最初からセットアップする方法を示します（推奨されるTSフック構成を含む）。また、近日公開予定のRTK QueryデータフェッチAPIを使用して、そのデータをUIに表示する方法も示します。

  • Reduxチュートリアル：概要とウォークスルー
    https://www.taniarascia.com/redux-react-guide/
    Tania Rasciaによるよく書かれたチュートリアルで、Reduxの主要な概念をすばやく説明し、バニラReduxとRedux Toolkitを使用して基本的なRedux + Reactアプリをまとめる方法を示します。

  • Redux for Beginners - 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での使用法、プロジェクトの編成、サンクとサガによる副作用を視覚的に段階的に説明する、よくできたスライドショー。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アプリケーションを構造化するためのパターンとプラクティス

アプリと例​

  • React-Redux RealWorldの例：現実世界向けのTodoMVC
    https://github.com/GoThinkster/redux-review
    Reduxで構築された、フルスタックの「現実世界」のアプリケーションの例。JWT認証、CRUD、記事のお気に入り、ユーザーのフォロー、ルーティングなどを含むMediumのようなソーシャルブログサイトをデモしています。RealWorldプロジェクトには、同じプロジェクトとAPI仕様の異なるサーバーとクライアントの実装が互いにどのように比較されるかを示すことを特に目的とした、サイトのフロントエンドとバックエンドの他の多くの実装も含まれています。

  • プロジェクト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 Clone」アプリの改作。ローカルステートの代わりに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
    テレビ番組を追跡および管理するためのシンプルで楽しい方法

  • io-808
    https://github.com/vincentriemer/io-808
    完全に再現されたWebベースのTR-808ドラムマシンへの試み

Reduxドキュメントの翻訳​

書籍​

  • Redux in Action
    https://www.manning.com/books/redux-in-action
    リデューサーとアクションの基本、Reactでの使用、複雑なミドルウェアと副作用、アプリケーションの構造、パフォーマンス、テストなど、Reduxの使用に関する多くの重要な側面を網羅した包括的な書籍。Reduxを使用するための多くのアプローチの長所、短所、トレードオフをうまく説明しています。Reduxの共同メンテナーであるMark Eriksonによって個人的に推奨されています。

  • The Complete Redux Book
    https://leanpub.com/redux-book
    本番環境で大規模な状態をどのように管理すればよいですか？ なぜストアエンハンサーが必要なのですか？ フォームバリデーションを処理する最適な方法は？ これらの質問やその他多くの質問に対する答えを、簡単な言葉とサンプルコードを使って得られます。 Reduxを使用して複雑で本番環境対応のWebアプリケーションを構築するために必要なすべてを学びましょう。（注：現在、永久無料です！）

  • Reactにおける状態の制御
    https://www.robinwieruch.de/learn-react-redux-mobx-state-management/
    もしあなたが著者の以前の書籍である「The Road to learn React」でReactを学んだことがあるなら、「Taming the State in React」は、Reactにおける基本および高度な状態管理について学ぶための完璧な組み合わせとなるでしょう。最初はReactなしでReduxのみを学習することから始めます。その後、この書籍ではReduxをReactアプリケーションに接続する方法が示されます。高度な章では、正規化、命名、セレクター、および非同期アクションについて学びます。最後に、ReactとReduxを使用して実際のアプリケーションをセットアップし、構築します。

コース​

  • Stephen Griderによる「Modern React with Redux」（有料）
    https://www.udemy.com/react-redux/
    React Router、Webpack、ES2015を使用してアプリを開発しながら、このチュートリアルでReactとReduxの基礎をマスターしましょう。このコースでは、すぐに立ち上げることができ、Reactコンポーネントを深く理解し、Reduxを使用してアプリケーションを構築するために必要なコア知識を習得できます。

  • Tyler McGinnisによる「Redux」（有料）
    https://tylermcginnis.com/courses/redux/
    Reduxを学ぶときは、その利点を理解できるほど大きなアプリの文脈で学ぶ必要があります。それがこのコースが巨大である理由です。より良い名前は「Real World Redux」かもしれません。「todoリスト」のReduxチュートリアルにうんざりしているなら、あなたは正しい場所に来ました。このコースでは、アプリケーションの状態を管理する上でReduxが特別な理由について詳しく説明します。楽観的な更新やエラー処理などのエッジケースをReduxがどのように処理するかを確認できるように、実際の「実世界」アプリケーションを構築します。また、Redux、Firebase、CSS Modulesとうまく連携する他の多くのテクノロジーについても説明します。

  • Wes Bosによる「Learn Redux」（無料）
    https://learnredux.com/
    Redux、React Router、React.jsの背後にあるコアなアイデアを簡略化するシンプルな写真アプリ「Reduxstagram」を構築する過程を説明するビデオコースです。

その他のリソース​

  • React-Redux Links は、React、Redux、ES2015などに関する質の高い記事、チュートリアル、および関連コンテンツの厳選されたリストです。
  • Redux Ecosystem Links は、Redux関連のライブラリ、アドオン、およびユーティリティのカテゴリ分けされたコレクションです。
  • Awesome Redux は、Redux関連のリポジトリの広範なリストです。
  • DEV Community は、Reduxプロジェクト、記事、チュートリアルを共有したり、Redux関連のトピックに関する議論を開始したり、フィードバックを求めることができる場所です。すべてのスキルレベルの開発者が参加できます。