# 示例 Redux [源碼](https://github.com/reactjs/redux/tree/master/examples) 中同時包含了一些示例。這些示例中的大多數也在[CodeSandbox](https://codesandbox.io)上，這是一個在線編輯器，可讓您在線測試示例。 ## 原生版 Counter 運行 [Counter Vanilla](https://github.com/reactjs/redux/tree/master/examples/counter-vanilla) 示例: ``` git clone https://github.com/reactjs/redux.git cd redux/examples/counter-vanilla open index.html ``` 該示例不需搭建系統或視圖框架，展示了基于 ES5 的原生 Redux API。 ## Counter 運行 [Counter](https://github.com/reactjs/redux/tree/master/examples/counter) 示例： ``` git clone https://github.com/reactjs/redux.git cd redux/examples/counter npm install npm start ``` 或者可以瀏覽在線[示例](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/counter)。 這是 Redux 結合 React 使用的最基本示例。出于簡化，當 store 發生變化，React 組件會手動重新渲染。在實際的項目中，推薦使用 React 和更高效的 [React Redux](https://github.com/reactjs/react-redux)綁定。 該示例包含測試代碼。 ## Todos 運行 [Todos](https://github.com/reactjs/redux/tree/master/examples/todos) 示例： ``` git clone https://github.com/reactjs/redux.git cd redux/examples/todos npm install npm start ``` 或者可以瀏覽在線[示例](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/todos)。 這個例子可以幫助你深入理解在 Redux 中 state 的更新與組件是如何共同運作的。展示了 reducer 如何委派 action 給其它 reducer，也展示了如何使用 [React Redux](https://github.com/reactjs/react-redux) 從展示組件中生成容器組件。 該示例包含測試代碼。 ## 支持撤銷的 Todos 運行 [Todos-with-undo](https://github.com/reactjs/redux/tree/master/examples/todos-with-undo) 示例: ``` git clone https://github.com/reactjs/redux.git cd redux/examples/todos-with-undo npm install npm start ``` 或者可以瀏覽在線[示例](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/todos-with-undo)。 此示例是前一個示例的變體。它與上一個示例基本相同但額外展示了如何使用 [Redux Undo](https://github.com/omnidan/redux-undo) 打包 reducer，僅增加幾行代碼實現撤銷/重做功能。 ## TodoMVC 運行 [TodoMVC](https://github.com/reactjs/redux/tree/master/examples/todomvc) 示例: ``` git clone https://github.com/reactjs/redux.git cd redux/examples/todomvc npm install npm start ``` 或者可以瀏覽在線[示例](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/todomvc)。 經典的 [TodoMVC](http://todomvc.com/) 示例。與 Todos 示例的目的相同，可以通過這個示例比較和其他框架的異同。 該示例包含測試代碼。 ## 購物車 運行 [Shopping Cart](https://github.com/reactjs/redux/tree/master/examples/shopping-cart) 示例： ``` git clone https://github.com/reactjs/redux.git cd redux/examples/shopping-cart npm install npm start ``` 或者可以瀏覽在線[示例](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/shopping-cart)。 該示例展示了隨著應用升級變得愈發重要的常用的 Redux 模式。尤其展示了，如何使用 ID 來標準化存儲數據實體，如何在不同層級將多個 reducer 組合使用，如何利用 reducer 定義選擇器以封裝 state 的相關內容。該示例也展示了使用 [Redux Logger](https://github.com/fcomb/redux-logger) 生成日志，以及使用 [Redux Thunk](https://github.com/gaearon/redux-thunk) 中間件進行 action 的條件性分發。 ## 樹狀視圖 運行 [Tree View](https://github.com/reactjs/redux/tree/master/examples/tree-view) 示例: ``` git clone https://github.com/reactjs/redux.git cd redux/examples/tree-view npm install npm start ``` 或者可以瀏覽在線[示例](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/tree-view)。 該示例展示了深層嵌套樹狀視圖的渲染，以及為了方便 reducer 更新，state 的標準化寫法。優良的渲染表現，來自于容器組件細粒度的、僅針對需要渲染的 tree node 的綁定。 該示例包含測試代碼。 ## 異步 運行 [Async](https://github.com/reactjs/redux/tree/master/examples/async) 示例： ``` git clone https://github.com/reactjs/redux.git cd redux/examples/async npm install npm start ``` 或者可以瀏覽在線[示例](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/async)。 該示例包含了：從異步 API 的讀取操作、基于用戶的輸入來獲取數據、顯示正在加載的提示、緩存響應、以及使緩存過期失效。使用 [Redux Thunk](https://github.com/gaearon/redux-thunk) 中間件來封裝異步帶來的附帶作用。 ## 同構 運行 [Universal](https://github.com/reactjs/redux/tree/master/examples/universal) 示例: ``` git clone https://github.com/reactjs/redux.git cd redux/examples/universal npm install npm start ``` 這是使用 Redux 和 React 的[服務端渲染](../recipes/ServerRendering.md) 的基本演示。 它演示了如何在服務器上準備初始 store state，并將其傳遞給客戶端，以便客戶端 store 可以從現有 state 啟動。 ## 真實場景 運行 [Real World](https://github.com/reactjs/redux/tree/master/examples/real-world) 示例： ``` git clone https://github.com/reactjs/redux.git cd redux/examples/real-world npm install npm start ``` 或者可以瀏覽在線[示例](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/real-world)。 最為復雜的示例。濃縮化的設計，包含了持續性地從標準化緩存中批量獲取數據實例，針對 API 調用的自定義中間件的實現，逐步渲染已加載的數據、分頁器、緩存響應，展示錯誤信息，以及路由。同時，包含了調試工具 Redux DevTools 。 ## 更多示例 前往 [Awesome Redux](https://github.com/xgrommx/awesome-redux) 獲取更多 Redux 示例。