react+redux構建淘票票首頁

react+redux構建淘票票首頁

描述

---

 在之前的項目中都是單純的用react，並沒有結合redux。對於中小項目僅僅使用react是可以的；但當項目變得更加復雜，僅僅使用react是遠遠不夠的，我們需要將UI渲染和數據處理區分開，因此我們需要引入redux來管理數據層。寫該小demo的目的主要是為了在理論學習的基礎上更好的進行實踐，通過自己親手寫個小項目我們才能更好的理解redux是如何管理數據層的。數據是取自淘票票官方二月份的部分數據。

技術棧

---

 react.js、react-router、redux、es6、webpack、less等。

github地址

---

 

https://github.com/zhuotianbao/tiaopiaopiao--react-redux

 目錄結構

---

- dist [打包后代碼]
- src [源碼]
 -- css [樣式]
 -- data [數據]
 -- img [圖片]
 -- js [js代碼]
  └ actions [創建action]
  └ components [純UI組件]
  └ constants [定義type類型]
  └ containers [獲取store中的數據;將dispatch與actionCreator結合起來]
  └ reducers [reducer純函數]
  └ store [創建store]
  └ index.js [路由配置]
 -- index.html [入口]

項目瀏覽

---

  

特色功能

---

該小DEMO除了應用redux技術之外，還有個特色功能：

1. 用原生js封裝一個輪播圖組件。
2. 引入異步加載組件。同步加載方式，每次都會把所有的依賴加載完再進行渲染，導致加載時間長。
3. 各個組件的js分開打包。要是將所有的js都打包在一個文件夾，當項目太大時會導致文件太大，無法滿足性能加載速度等要求。

 備注

---

由於時間比較倉促，一些細節還沒來得及完善，還要很多東西都還沒來得及加入，如immutable.js進行性能優化，圖片的懶加載，redux開發者工具的日志監控等等功能。后續會慢慢完善，敬請期待...