使用redux架构react项目--目录结构(一)

项目结构主要参考了redux的官方实例todomvc,在todomvc的基础上，将开发目录放到了app文件夹中，简化了目录结构；其次，用fetch写了一个api层，集中出来接口请求；样式是用less处理，配置了webpack loader解析less；webpack中配置了开发测试发布三个环境。

项目结构说明

• project
  • app ------------------------------------控制器,操作actions
  • api -----------------------抽象出来的fetch方法
  • components ----------------------组件
  • constants ----------------------------常量
  • containers --------------容器,调用组件组织页面
  • image -------------------------------图片
  • less ---------------------------------less
  • lib -----------------------------库
  • reducers -----------相当于state的状态机,每个类代表一个state
  • store -------------------------控制中心,一般不做改变
  • index.js ---------------------------项目入口
  • dev -------------------------------测试和开发环境根目录
  • dist ---------------------------------发布环境根目录
  • node_modules -------------------依赖的库
  • webpack.config ------------------打包环境
  • webpack.product.config -------------生产环境

项目展望

由于目前项目还比较简单，现有架构还是可以满足开发的，但是如果项目进一步复杂，还有那些地方可以改进呢？

• 组件进一步细分，同理less

现在组件全部放在了components当中，当组件过多的时候会很不好管理。可能在里面再按container细分组件组。

• reducers是否可以进一步抽象？

现在设计的reducers相当于一个扁平化的state管理器，当时当项目复杂时（例如：我要删除一篇文章的同时，要删除文章和分类的绑定），如何复合的处理state，当前的reducers只满足一个reducers对应一个state，是否可以抽象出一个common-reducer作为基础reducers。

欢迎交流