React + Redux的模块组织方式

React + Redux 是React生态中使用最频繁的技术栈，关于如何组织React+Redux的项目结构有如下几种：

 

按照类型

 

这里的类型指的是一个文件在项目中充当的角色类型，即这个文件是一个component，还是一个container，或者是一个reducer等，充当component、container、action、reducer等不同角色的文件，分别放在不同的文件夹下，这也是Redux官网示例所采用的项目结构。这种结构如下所示：

 

actions/
  a.js
  b.js
components/
  a1.js
  a2.js
  b1.js
constainers/
  a.js
  b.js
reducers/
  a.js
  b.js
index.js

 

缺陷
使用这种结构组织项目，每当增加一个新功能时，需要在containers和components文件夹下增加这个功能需要的组件，还需要在actions和reducers文件夹下，分别添加Redux管理这个功能使用到的action和reducer。

 

按照功能

 

一个功能模块对应一个文件夹，这个功能所用到的container、component、action、reducer等文件，都存放在这个文件夹下。如下所示：

 

feature1/