Redux 示例

示例

Redux 源碼 中同時包含一些示例。

復(fù)制代碼時注意

如果你把 Redux 示例代碼復(fù)制到其它目錄，可以刪除位于 webpack.config.js 文件尾部 “You can safely delete these lines in your project.” 注釋后的代碼。

Counter 計數(shù)器示例

運行 Counter 示例：

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

cd redux/examples/counter
npm install
npm start

open http://localhost:3000/

這個示例包含：

• 基本的 Redux 應(yīng)用開發(fā)流程；
• 測試代碼。

TodoMVC 示例

運行 TodoMVC 示例：

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

cd redux/examples/todomvc
npm install
npm start

open http://localhost:3000/

這個示例包含：

• Redux 中使用兩個 reducer 的方法；
• 嵌套數(shù)據(jù)更新；
• 測試代碼。

Todos with Undo 示例

運行 todos-with-undo 示例:

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

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

open http://localhost:3000/

這個示例包含:

• Redux 中使用兩個 reducer 的方法；
• 使用 redux-undo 在 Redux 中實現(xiàn)撤銷/重做功能。

異步

運行 Async 示例：

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

cd redux/examples/async
npm install
npm start

open http://localhost:3000/

這個示例包含：

• 使用 redux-thunk 處理簡單的異步開發(fā)流程；
• 緩存服務(wù)器響應(yīng)數(shù)據(jù)，并在獲取數(shù)據(jù)過程中顯示加載進(jìn)度條；
• 緩存數(shù)據(jù)過期方法。

Universal 示例

運行 Universal 示例:

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

cd redux/examples/universal
npm install
npm start

open http://localhost:3000/

這個示例包含：

• 使用 Redux 和 React 的 Universal rendering 庫；
• 經(jīng)由異步得到輸入的內(nèi)容，從而提前獲取 state ；
• 從服務(wù)器端向客戶端傳遞 state 。

Real World 示例

運行 Real World 示例：

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

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

open http://localhost:3000/

這個示例包含：

• 實際應(yīng)用中的 Redux 的異步處理；
• 使用 normalized 結(jié)果集來保存并緩存數(shù)據(jù)；
• 用于 API 請求的自定義 middleware ；
• 緩存服務(wù)器響應(yīng)數(shù)據(jù)，并在獲取數(shù)據(jù)過程中顯示加載進(jìn)度條；
• 分頁器；
• 路由。

更多

參考 Awesome Redux 獲取更多示例。