深入浅出React之第四章：推荐的Redux目录结构

1.传统的MVC目录结构

在MVC中，应用代码分为Controller,Model,View，分别代表三种模块角色，就是把所有的Controller代码放在controller文件夹下，把所有的Model代码放在model文件夹下，把View代码放在view文件夹下。
如下所示：

src/

controllers

todoController.js

filterController.js

models

todoModel.js

filterModel.js

views

todoView.js

filterView.js

在开发一些简单的Redux应用时，我们可以使用这种页面划分方法。

src/

app.js

actions

todoAction.js

filterAction.js

reducers

todoReducer.js

filterReducer.js

components

todoList.js

todoItem.js

filter.js

containers

todolistContainer.js

todoItemContainer.js

filterContainer.js

2.按功能组织

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

拿Todo应用来说，两个基本的功能就是TodoList和Filter，所以按功能组织就是这样子：

todolist

action.js

actionTypes.js

reducer.js

index.js

view

component.js

container.js

filter

action.js

actionTypes.js

actionTypes.js

reducer.js

index.js

view

component.js

container.js

每个功能模块对应一个目录，分别是todoList和filter，每个目录下包含同样的角色文件：

• actionTypes.js 定义action类型；
• actions.js 定义action构造函数；
• reducer.js定义这个功能模块如果响应actions.js定义的动作；
• views 包含功能模块中所有的React组件，包括展示组件和容器组件；
• index.js 把所有的角色导入，统一导出。
  这种组织方式下，当你要修改某个模块时，只要关注对应的目录即可。

按功能组织方式下的每个模块，都有一个index.js，明确了模块对外的接口：

import * as actions from './action';
import reducer from './reducer.js';
import view from './view/container';
export {actions,reducer,view};

当filter模块依赖todolist模块时，只需要导入对应的代码即可:

import {actions,reducer,view as Todolist}  from '../todolist'

3.推荐的Redux项目目录结构

我们的项目代码使用混合方式划分文件结构，既采用了类型划分的优势，又添加了功能划分的特点。

src/ 所有源代码存放的路径

app.js 整个应用的入口

views/ 应用中某个页面的入口文件，一般为路由组件。

Home.js 例如，首页的入口就是Home.js

Home.css Home页面对应的样式

HomeRedux.js Home页面中所有与redux相关的reducer,action creator的汇总，即components/Home下所有*Redux.js的汇总。

components/ 所有应用的组件

Home/ 例如，views/中含有一个名为Home的view，则在components/中就有一个名为Home的子文件夹。

Table.js Home界面中的一个列表组件。

Table.css 列表组件对应的样式

TableRedux.js 列表组件的reducer,action creator 及action type，整合在同一个文件中。

TodoItem.js

TodoItem.css

TodoItemRedux.js

Shared/ 不归属与任何view的组件。例如一些公共组件。

containers/

DevTools.js 配置DevTools

Root.js 一般被app.js依赖，用于根据环境判断是否需要加载DevTools。

layouts/ 布局相关的组件及样式，如菜单，侧边栏，header,footer等。

redux/ Redux Store 相关的配置

reducers.js 整个应用中所有reducer的汇总

store.js 整个项目的store

routes/ 路由相关的配置

utils/ 工具函数，常量等

styles/ 全局公共样式

app.css 应用主样式

基本上，我们只需要关注的就是views/和components/这两个文件夹，它们也是存放绝大多数业务代码的地方。

在views/目录中，存放的是每个路由的入口页，如首页（Home）、详情页（Detail）、管理后台页（Admin）等。而每个入口都会有三个文件：.js是入口的组件，.css是对应组件的样式，而*Redux.js是components/Home/目录下所有reducer和action的聚合。

在components/Home/目录里，是当前路由对应的页面（Home）需要的所有内容——components、actions、reducers、样式等。