关于React Route Redux的分模块

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

一、模块的概念

App

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

• Module: main
• Module: grapher
• Module: work
• Module: user

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

View

根据Redux的编程规范，所有React Component分两种：

• Presentational / Stateless / Dumb Component：说白了这种Component只负责展示，数据和回调都来自props，本身没有state. （所有名字里Dumb最短，就用这个名字吧）
• Container / Smart Component：负责交互Redux中的数据的Component。（惯例，用最短的名字：Smart）

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

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

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

这样的话，Module就应该包含这些View内容：

• containers：Smart Component，供Route用。
• layouts：项目专属的Dumb Component.

Model

根据Redux的用法，这部分包含：

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

这样，Module就应该包含这些Model内容：

• actions：存放所有的actions常亮和action creators.
• reducers：存放所有reducers.

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

综合起来

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

• route.js：这个文件引用所有给route用的Component（smart or dumb），组建局部Route，并输出这个Route.
• reducer.js：这个文件combine所有本Module中的Reducers，然后输出。
• 也许会有的interface.js：这个作为api的出口。

注：

• 由于route中有需要在跳转前进行init或auth，因此export routeFactory 而不是单纯输出route. 这个factory接收一个store参数，用于在init中发dispatch，或是auth中getState( ) 做逻辑判断。
• 关于interface.js：有时候要去校验用户是否登陆，如果直接用store.getState( )的话，要依赖于用户reducer的挂载点。把mount变量从user这个Module里引过来，不如直接让user提供API来调用。不过这个怎么用，还要结合Smart的生成研究一下。

结论

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

• index.js：App入口，负责引入store，组装各种东西，包括Model的Route.
• store.js：项目的store（Redux就一个store），负责import所有module下的reducer.

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

• index.js：App入口
• store.js：项目的store
• main/：Module main
  • route.js：export View / Route
  • containers/：Module下的Smart Components
  • layouts/：项目专属Dumb Components
  • reducer.js：export Model / Reducer
  • reducers/：项目reducers
  • actions/：项目actions
• grapher/：Module grapher
• work/：Module work
• user/：Module user