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

例

Reduxにはソースコードにいくつかの例が配信されています。ソースコード。これらの例の大部分はCodeSandboxでも見ることができ、オンラインで例を使って試すことができます。

カウンタ（バニラ）​

カウンタ（バニラ）例を実行します

git clone https://github.com/reduxjs/redux.git

cd redux/examples/counter-vanilla
open index.html

または、サンドボックスをチェックしてください

ビルドシステムやビューフレームワークは必要なく、ES5で使用されている未処理のRedux APIを表示するために存在しています。

カウンタ​

カウンタを実行します

git clone https://github.com/reduxjs/redux.git

cd redux/examples/counter
npm install
npm start

または、サンドボックスをチェックしてください

これが、ReduxをReactと一緒に使用する際の基本的な例です。分かりやすいように、storeが変更されると、Reactコンポーネントを手動で再レンダリングしています。実際のプロジェクトでは、パフォーマンスの高いReact Reduxバインディングを使用することになるでしょう。

この例にはテストが含まれています。

Todos​

Todosを実行します

git clone https://github.com/reduxjs/redux.git

cd redux/examples/todos
npm install
npm start

または、サンドボックスをチェックしてください

Reduxにおける状態の更新がコンポーネントとどのように連動するかを深く理解するための最良の例です。この例は、リデューサーがそれ以外のすべてのリデューサーに対してアクションの処理をデリゲートする方法、そしてReact Reduxを使用してプレゼンテーショナルコンポーネントからコンテナーコンポーネントを生成する方法を示しています。

この例にはテストが含まれています。

Undo付きTodos​

Undo付きTodosを実行します

git clone https://github.com/reduxjs/redux.git

cd redux/examples/todos-with-undo
npm install
npm start

または、サンドボックスをチェックしてください

これは前述の例の変わり種です。ほぼ同一ですが、さらに Redux Undo でリデューサをラップすることで、コード数行でアプリに元に戻す/やり直す機能を追加する方法を示しています。

TodoMVC​

TodoMVC 例を実行します

git clone https://github.com/reduxjs/redux.git

cd redux/examples/todomvc
npm install
npm start

また、サンドボックスを確認します。

これは、従来的な TodoMVC 例です。比較のためにここで紹介されていますが、Todo 例と同じ内容を網羅しています。

この例にはテストが含まれています。

ショッピングカート ​

ショッピングカート 例を実行します

git clone https://github.com/reduxjs/redux.git

cd redux/examples/shopping-cart
npm install
npm start

また、サンドボックスを確認します。

この例では、アプリが大きくなるにつれて重要となる、重要な慣用的な Redux パターンを示しています。特に、エンティティを ID で正規化された方法で格納する方法、いくつかのレベルのリデューサを構成する方法、リデューサと合わせてセレクタを定義して状態の形状に関する知識をカプセル化する方法を示しています。また、Redux Logger によるログと、Redux Thunk ミドルウェアによる条件付きのアクションのディスパッチも示しています。

ツリービュー​

ツリービュー 例を実行します

git clone https://github.com/reduxjs/redux.git

cd redux/examples/tree-view
npm install
npm start

また、サンドボックスを確認します。

この例では、深いネストされたツリービューのレンダリング方法と、リデューサから簡単に更新できるように正規化された形式による状態の表現方法を示しています。優秀なレンダリングのパフォーマンスは、コンテナコンポーネントがレンダリングするツリーノードだけに細かくサブスクライブすることで実現されています。

この例にはテストが含まれています。

非同期​

非同期 例を実行します

git clone https://github.com/reduxjs/redux.git

cd redux/examples/async
npm install
npm start

また、サンドボックスを確認します。

この例では、非同期 API の読み取り、ユーザー入力を応答してデータの取得、ロードインジケータの表示、レスポンスのキャッシュ、キャッシュの無効化が含まれています。非同期副作用をカプセル化するために、Redux Thunk ミドルウェアを使用します。

ユニバーサル​

ユニバーサル 例を実行します

git clone https://github.com/reduxjs/redux.git

cd redux/examples/universal
npm install
npm start

これは、Redux と React を使用した サーバーレンダリング の基本的なデモンストレーションです。サーバーで初期ストア状態を準備し、クライアントに渡してクライアントストアを既存の状態から起動する方法を示しています。

実例​

実例 例を実行します

git clone https://github.com/reduxjs/redux.git

cd redux/examples/real-world
npm install
npm start

また、サンドボックスを確認します。

これは最も高度な例です。意図的に込み入っています。フェッチされたエンティティを正規化されたキャッシュに保持すること、API呼び出しのカスタムミドルウェアの実装、部分的に読み込まれたデータのレンダリング、ページネーション、レスポンスのキャッシュ、エラーメッセージの表示、ルーティングをカバーしています。さらに、Redux DevToolsも含まれています。

その他の例​

Reduxアプリケーションと例のページで、その他の例を見ることができますReduxアドオンカタログ。