YAOPAI 团队博客

关于React Route Redux的分模块

2016-04-15  本文已影响602人  雪牙那个前端

简单说明一下代码文件结构背后的想法。

一、模块的概念

App

一个模块可以简单理解为一个Web App中的子App.

每个模块应该负责自己的内部MVC,同时相互之间尽量独立,并通过预先定义的接口来交互/交换数据。

View

根据Redux的编程规范,所有React Component分两种:

然后从项目的角度继续细分,Dumb Component分为2种:

  1. 用于布局的Layout:项目专属。
  2. 可以复用的Web Component:高可复用性。

对于高可复用的Web Component,应该放在独立的类似arsenal包里,作为组件引入进来。

这样的话,Module就应该包含这些View内容:

Model

根据Redux的用法,这部分包含:

  1. Action:意图,由Redux-thunk扩展之后的版本。
  2. Reducer:这里要遵守pure function的概念。

这样,Module就应该包含这些Model内容:

注:
这里有个建议:reducer在Module中或多或少,多的时候创建文件夹reducers,少的时候直接一个reducers.js文件,这里都用复数格式。作为export的情况,则用单数。

综合起来

综合以上的说明,View和Model部分在Module中区分好,还要暴露特定的exports给App。
所以Module目录下增加2个文件:

注:

结论

各Module按照功能区分开之后,App作为整个应用的入口(index.js),就要负责把Model和View组合起来,所以项目源码目录下放这两个文件:

然后得到项目的结构如下:

上一篇 下一篇

猜你喜欢

热点阅读