堆糖商店react+react-router+redux+webpack全家桶项目架构

[iscarecrow]

项目结构

+-- actions
+-- common
+-- components
+-- constants
+-- containers
+-- data
+-- middleware
+-- mock
+-- reducers
+-- store
+-- utils
+-- route.js
+-- app.js

UI层

• components
• containers
  区分方法参考Dan Abramov的一些文章Presentational and Container Components

关键问题在于 props, state的理解

数据层 redux

• actions
• store
• reducers
• middleware
• constants

开发中需要注意每个的分层的职责定义。

• 不要在reducers里写side-effect代码(关注fp编程pure function的理解)。
• middleware可以提供打点，异步等支持
• actions关键是抽象

mock数据和固定数据

• mock
• data

工具函数

• utils 提供一些工具方法
• common 提供了一些其他业务函数

webpack的使用

• es6 compiler babel
• webpack-dev-server 开发部署
• hot module replace

PS: 项目demo暂时未写,之后补充。