按角色組織

如果你用MVC框架開發過應用，應該知道MVC框架之下，通常有這樣一種代碼組織方式：

controllers/todoController.jsfilterController.js models/todoModel.jsfilterModel.js views/todo.jstodoItem.jsfilter.js

Controller、Model、View分別代表三種模塊角色。這種組織代碼的方式叫做“按角色組織”。

因為MVC的影響深遠，一些風格依然影響了前端人員的思維方式，在Redux應用的構建中，就有這種組織方式：

reducers/todoReducer.jsfilterReducer.js actions/todoAction.jsfilterActions.js components/todoList.jstodoItem.jsfilter.js containers/todoListContainer.jstodoItemContainer.jsfilterContainer.js

角色如下：

• reducers 目錄包含所有Redux的reducer；
• actions 目錄包含所有action構造函數；
• components 目錄包含所有的展示組件；
• containers 目錄包含所有的容器組件。

這種按角色組織的方式看起來不錯，實際非常不利于應用的擴展。當你需要對一個功能進行修改時，要在多個角色目錄下切換，當功能模塊多了，這種頻繁的目錄切換即浪費時間也增加了編碼厭倦感。

如果說MVC框架下，因為三個角色之間的交叉關系，也只能默默接受，那么在Redux框架下，我們已經有機會實行嚴格模塊化思想。

按功能組織

Redux應用適合于“按功能組織”，也就是把完成同一應用功能的代碼放在一個目錄下，一個應用功能包含多個角色的代碼。Redux中，不同的角色就是reducer、actions和視圖，而應用功能對應的就是用戶界面的交互模塊。

拿Todo應用來說，兩個基本的功能就是TodoList和Filter，所以按功能組織就是這樣子：

todoList/actions.jsactionTypes.jsindex.jsreducer.jsviews/components.jscontainers.js filter/actions.jsactionTypes.jsindex.jsreducer.jsviews/components.jscontainer.js

每個功能模塊對應一個目錄，分別是todoList和filter，每個目錄下包含同樣的角色文件：

• actionTypes.js 定義action類型；
• actions.js 定義action構造函數；
• reducer.js 定義這個功能模塊如果響應actions.js定義的動作；
• views 包含功能模塊中所有的React組件，包括展示組件和容器組件；
• index.js 把所有的角色導入，統一導出。

這種組織方式下，當你要修改某個模塊時，只要關注對應的目錄即可。

按功能組織下的每個模塊，都有一個index.js，明確了模塊對外的接口：

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

當filter模塊依賴todoList模塊時，對應的導入代碼：

import { actions, reducer, view as TodoList } from '../todoList';

混合方式

大型應用中，下面這種混合方式（既采用類型劃分的優勢，又添加了功能劃分的特點）也是不錯的選擇。

src/ 所有源代碼存放的路徑app.js 整個應用的入口views/ 應用中某個頁面的入口文件，一般為路由組件Home.js 例如，首頁的入口就是Home.jsHome.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，整合在一個文件中Modal.jsModal.cssModalRedux.jsshared/ 不歸屬于任何view的組件，如一些公共組件等containers/DevTools.js 配置DevToolsRoot.js 一般被app.js依賴，用于根據環境判斷是否需要加載DevToolslayouts/ 布局相關的組件及樣式，如菜單、側邊欄、header、footer等redux/ Redux store相關的配置reducers.js 整個應用中所有reducer的匯總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、樣式等。

什么是*Redux.js？實際上，按照Redux應用的一般目錄結構劃分方式，應該分別有reducers、action creator和constants文件夾。但是在實際應用中，我們發現這樣的劃分方式略顯繁瑣，添加一個組件需要至少新建4個文件。同時對于業務應用來說，reducers等于Redux相關的文件并不太可能被其他地方復用，因此放在一個文件里組織并管理是更好的選擇。目前在Redux社區中也存在一個類似的規范。Ducks modular redux

總結

以上是生活随笔為你收集整理的React系列---React+Redux工程目录结构划分的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。