深入浅出React+Redux（六：模块化 React 和 Redux 应用）

前言

我们已经介绍了React 的基本工作方式，也知道了 Redux 在组合React 组件中的作用，但是更多的只是了解其基本原理和使用方法 。

但是接下来我们将要了解为以下几个方面

1) 模块化应用的要点
2) 代码文件的组织方式
3) 状态树的设计
4) 开发辅助工具

（一）模块化应用

简单的看，React和Redux都执行一个公式

 UI=render(state）

来产生用户界面，但是架构一个新应用，我们必须考虑以下几点

1) 码文件的组织结构；
2) 确定模块的边界；
3) Store 的状态树设计。

最后我们会动手写一个TODO应用，来学习各个层次的知识。

（二）代码文件的组织方式

（1）接角色组织

目前包含Redux的github和网上大多数教程都采用这种方式。

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

当然我们上家也是这样基于角色组织，但是项目大后。就发现一个问题，当我们修改views内部容器组件，就需要同时修改actions和actionTypes和 Reducers 内相对应的文件。这无疑让人头疼。

（2）接功能组织

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

我们以 Todo 应用为例子，这个应用的两个基本功能就是 TodoList 和 Filter ，所以代码就这样组织，文件目录列表如下：

这里，我将原来角色布局顶层的views更改为pages。Todo内部有两个功能模块。
每个基本功能对应的其实就是一个功能模块，每个功能模块对应一个目录，这个例子中分别是 todoList 和 filter ，每个目录下包含同样名字的角色文件：

actionTypes