Examples: Redux interactive example apps">Examples: Redux interactive example apps">
跳到主要內容

範例

Redux 在其原始碼中分發了一些範例。這些範例大多數也在CodeSandbox上，這是一個線上編輯器，讓您可以在線上使用範例。

Counter Vanilla​

執行Counter Vanilla範例

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

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

或查看沙盒

它不需要建置系統或檢視架構，而且存在於顯示與 ES5 一起使用的原始 Redux API。

Counter​

執行Counter範例

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

cd redux/examples/counter
npm install
npm start

或者查看 沙盒

這是將 Redux 與 React 搭配使用的最基本範例。為了簡化起見，當儲存變更時，它會手動重新呈現 React 元件。在實際專案中，你可能會想改用效能極佳的 React Redux 繫結。

此範例包含測試。

待辦事項​

執行 待辦事項 範例

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

cd redux/examples/todos
npm install
npm start

或者查看 沙盒

這是深入瞭解 Redux 中的狀態更新如何與元件搭配運作的最佳範例。它展示了 reducer 如何委派處理動作給其他 reducer，以及如何使用 React Redux 從簡報元件產生容器元件。

此範例包含測試。

可復原的待辦事項​

執行 可復原的待辦事項 範例

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

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

或者查看 沙盒

這是前一個範例的變形。它幾乎完全相同，但額外展示了如何使用 Redux Undo 包裝你的 reducer，讓你只需幾行程式碼就能為你的應用程式新增復原/重做功能。

TodoMVC​

執行 TodoMVC 範例

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

cd redux/examples/todomvc
npm install
npm start

或者查看 沙盒

這是經典的 TodoMVC 範例。它在此處只是為了比較，但它涵蓋了與待辦事項範例相同的重點。

此範例包含測試。

購物車​

執行 購物車 範例

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

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

或者查看 沙盒

此範例展示了隨著應用程式成長而變得重要的 Redux 慣用語法模式。特別是，它展示了如何以正規化方式根據其 ID 儲存實體、如何在多個層級組成 reducer，以及如何定義與 reducer 並行的選取器，以便封裝有關狀態形狀的知識。它還展示了使用 Redux Logger 進行記錄，以及使用 Redux Thunk 中介軟體有條件地發送動作。

樹狀檢視​

執行 樹狀檢視 範例

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

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

或查看 沙盒

此範例展示了如何呈現深度巢狀的樹狀檢視，並以正規化形式表示其狀態，以便輕鬆從 reducer 更新。透過容器元件僅細緻地訂閱他們要呈現的樹狀節點，可以達成良好的呈現效能。

此範例包含測試。

非同步​

執行 非同步 範例

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 外掛程式目錄。