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开发者工具的日志监控等等功能。后续会慢慢完善，敬请期待...