模块化React和Redux

代码文件的组织方式

1.按角色组织

受 MVC “按角色组织”代码文件的影响，在Redux应用的构建中，我们把 controllers、models、views目录换成reducers、actions、components和containers。

• reducers 目录包含所有Redux的reducer；
• actions 目录包含所有action构造函数；
• components 目录包含所有的傻瓜组件；
• containers 目录包含所有的容器组件。

虽然“按照角色组织”的方式看起来不错，但是实际上非常不利于应用的扩展。

2. 按功能组织

Redux 应用适合于“按功能组织”，也就是把完成同一应用功能的代码放在一个目录下，一个应用功能包含多个角色的代码。在Redux中，不同的角色就是 reducers、actions和视图，而应用功能对应的就是用户界面上的交互模块。

拿Todo 应用为例子，这个应用的两个基本功能就是TodoList和Filter，所以代码可以这样组织：

todoList/
    actions.js
    actionTypes.js
    index.js
    reducer.js
    views/
        component.js
        container.js
filter/
    actions.js
    actionTypes.js
    index.js
    reducer.js
    views/
        component.js
        container.js

• actionTypes.js 定义action类型；
• actions.js 定义action构造函数，决定了这个功能模块可以接受的动作；
• reducer.js 定义这个功能模块如何响应actions.js中定义的动作；
• views 目录，包含这个功能模块中所有的React组件，包括傻瓜组件和容器组件；
• index.js 把所有的角色导入，然后统一导出。