react+redux構建淘票票首頁

react+redux構建淘票票首頁

描述

---

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

技術棧

---

 react.js、react-router、redux、es六、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開發者工具的日誌監控等等功能。後續會慢慢完善，敬請期待...