React系列---React+Redux工程目錄結構劃分

按角色組織

若是你用MVC框架開發過應用，應該知道MVC框架之下，一般有這樣一種代碼組織方式：

controllers/
  todoController.js
  filterController.js
models/
  todoModel.js
  filterModel.js
views/
  todo.js
  todoItem.js
  filter.js

Controller、Model、View分別表明三種模塊角色。這種組織代碼的方式叫作「按角色組織」。

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

reducers/
  todoReducer.js
  filterReducer.js
actions/
  todoAction.js
  filterActions.js
components/
  todoList.js
  todoItem.js
  filter.js
containers/
  todoListContainer.js
  todoItemContainer.js
  filterContainer.js

角色以下：

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

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

若是說MVC框架下，由於三個角色之間的交叉關係，也只能默默接受，那麼在Redux框架下，咱們已經有機會實行嚴格模塊化思想。

按功能組織

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

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

todoList/
  actions.js
  actionTypes.js
  index.js
  reducer.js
  views/
    components.js
    containers.js
filter/
  actions.js
  actionTypes.js
  index.js
  reducer.js
  views/
    components.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 './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.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，整合在一個文件中
      Modal.js
      Modal.css
      ModalRedux.js
    shared/          不歸屬於任何view的組件，如一些公共組件等
  containers/
    DevTools.js      配置DevTools
    Root.js          通常被app.js依賴，用於根據環境判斷是否須要加載DevTools
  layouts/           佈局相關的組件及樣式，如菜單、側邊欄、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