このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。 エラーを見つけましたか？ 問題を報告 →
例
Reduxにはソースコードにいくつかのサンプルが同梱されています。これらの例のほとんどはオンラインエディタのCodeSandboxでも公開されており、ブラウザ上で直接操作できます。
Counter Vanilla
Counter Vanillaの例を実行するには：
git clone https://github.com/reduxjs/redux.git
cd redux/examples/counter-vanilla
open index.html
またはsandboxで確認：
この例はビルドシステムやビューフレームワークを必要とせず、ES5で記述された生のRedux APIの使用方法を示しています。
Counter
Counterの例を実行するには：
git clone https://github.com/reduxjs/redux.git
cd redux/examples/counter
npm install
npm start
またはsandboxで確認：
これはReactとReduxを組み合わせた最も基本的な例です。簡略化のため、ストア変更時にReactコンポーネントを手動で再レンダリングしています。実際のプロジェクトでは、代わりに高性能なReact Reduxバインディングの使用を推奨します。
この例にはテストが含まれています。
Todos
Todosの例を実行するには：
git clone https://github.com/reduxjs/redux.git
cd redux/examples/todos
npm install
npm start
またはsandboxで確認：
Reduxにおける状態更新とコンポーネントの連携を深く理解するのに最適な例です。リデューサーがアクション処理を他のリデューサーに委譲する方法や、React Reduxを使用してプレゼンテーショナルコンポーネントからコンテナコンポーネントを生成する方法を示しています。
この例にはテストが含まれています。
Todos with Undo
Todos with Undoの例を実行するには：
git clone https://github.com/reduxjs/redux.git
cd redux/examples/todos-with-undo
npm install
npm start
またはsandboxで確認：
前の例を発展させたバリエーションです。基本構造は同じですが、追加でRedux Undoでリデューサーをラップすることで、数行のコードでUndo/Redo機能を実装する方法を実演しています。
TodoMVC
TodoMVCの例を実行するには：
git clone https://github.com/reduxjs/redux.git
cd redux/examples/todomvc
npm install
npm start
またはsandboxで確認：
古典的なTodoMVCの実装例です。比較用に掲載していますが、Todosの例と同等の内容をカバーしています。
この例にはテストが含まれています。
Shopping Cart
Shopping Cartの例を実行するには：
git clone https://github.com/reduxjs/redux.git
cd redux/examples/shopping-cart
npm install
npm start
またはsandboxで確認：
この例は、アプリケーションが成長するにつれて重要になるReduxの慣用的なパターンを示しています。具体的には、エンティティをIDによって正規化された方法で保存する方法、複数のレベルでリデューサーを構成する方法、状態の形状に関する知識をカプセル化するためにリデューサーと共にセレクターを定義する方法が含まれます。また、Redux Loggerを使用したロギングと、Redux Thunkミドルウェアによるアクションの条件付きディスパッチも実演しています。
Tree View
Tree Viewの例を実行：
git clone https://github.com/reduxjs/redux.git
cd redux/examples/tree-view
npm install
npm start
または、sandboxを確認してください：
この例では、深くネストされたツリービューのレンダリングと、その状態を正規化された形式で表現する方法を示しており、リデューサーからの更新が容易になります。コンテナコンポーネントがレンダリングするツリーノードのみを細かく購読することで、優れたレンダリングパフォーマンスを実現しています。
この例にはテストが含まれています。
Async
Asyncの例を実行：
git clone https://github.com/reduxjs/redux.git
cd redux/examples/async
npm install
npm start
または、sandboxを確認してください：
この例には、非同期APIからの読み取り、ユーザー入力に応じたデータの取得、ローディングインジケーターの表示、レスポンスのキャッシュ、キャッシュの無効化が含まれます。Redux Thunkミドルウェアを使用して非同期の副作用をカプセル化しています。
Universal
Universalの例を実行：
git clone https://github.com/reduxjs/redux.git
cd redux/examples/universal
npm install
npm start
これはReduxとReactを使ったサーバーレンダリングの基本的なデモンストレーションです。サーバー上で初期ストア状態を準備し、クライアントに渡すことで、クライアントストアが既存の状態から起動する方法を示しています。
Real World
Real Worldの例を実行：
git clone https://github.com/reduxjs/redux.git
cd redux/examples/real-world
npm install
npm start
または、sandboxを確認してください：
これは最も高度な例です。設計上、内容が凝縮されています。取得したエンティティを正規化されたキャッシュに保持すること、API呼び出しのためのカスタムミドルウェアの実装、部分的に読み込まれたデータのレンダリング、ページネーション、レスポンスのキャッシュ、エラーメッセージの表示、ルーティングをカバーしています。さらに、Redux DevToolsが含まれています。
その他の例
さらに多くの例は、Redux Addons CatalogのRedux Apps and Examplesページで見つけることができます。