React總結篇之四_模塊化React和Redux應用

創建一個復雜一點的應用應該如何做：

• 模塊化應用的要點
• 代碼文件的組織方式
• 狀態數的設計
• 開發輔助工具

一、模塊化應用的要點
1.構建一個應用的基礎要做如下3件事情：

• 代碼文件的組織結構
• 確定模塊的邊界
• store的狀態樹設計

2. 代碼文件的組織方式：
   按功能組織
   Redux應用適用于按功能組織劃分，即把完成同一應用功能的代碼放在一個目錄下，一個應用功能包含多個角色的代碼。在Redux中，不同的角色就是reducer、actions和視圖，而應用功能對應的就是用戶界面上的交互模塊。
   拿Todo應用為例子，這個應用的兩個基本功能就是TodoList和Filter，所以代碼就這樣組織，文件目錄列表如下：
   
   每個基本功能對應的其實就是一個功能模塊，每個功能模塊對應一個目錄，每個目錄下包含同樣名字的角色文件。

   • actionTypes.js定義action類型；
   • actions.js定義action構造函數，決定了這個功能模塊可以接受的動作；
   • reducer.js定義這個功能模塊如何響應actions.js中定義的動作；
   • views目錄，包含這個功能模塊中所有的React組件，包括傻瓜組件和容器組件；
   • index.js這個文件把所有的角色導入，然后統一導出
     在這種組織方式下，當你要修改某個功能模塊的代碼的時候，只要關注對應的目錄就行了，所有需要修改的代碼文件都能在這個目錄下找到。
3. 模塊接口
   每個功能模塊下都有一個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中的功能，應該導入todoList這個目錄。因為導入這個目錄的時候，默認導入的就是這個目錄下的index.js文件，就是這個模塊想要公開出來的接口。

4.狀態樹的設計
狀態樹的設計建議遵循以下幾個原則：

• 一個模塊控制一個狀態節點
• 避免冗余數據
• 樹形結構扁平

4.1 一個狀態節點只屬于一個模塊
在Redux應用中，store上的每一個state都只能通過reducer來更改，而我們每個模塊都有機會導出一個自己的reducer，這個導出的reducer只能最多更改Redux的狀態樹上一個節點下的數據，因為reducer之間對狀態樹上的修改權是互斥的，不能讓兩個reducer都可以修改同一個狀態樹上的節點。比如，如果A模塊的reducer負責修改狀態樹a字段下的數據，那么另一個模塊B的reducer就不可能有機會修改a字段下的數據。這里指的是‘修改權’，不是‘讀取權’（讀取權對任何模塊都是開放的）。

4.2 避免冗余數據
在Redux的Store中，一定要避免數據的冗余，因為這可能會導致數據不一致的問題。

4.3 樹形結構扁平
在設計Redux Store的狀態樹時，要盡量保持樹形結構的扁平（樹形結構不要深）。

4.4 不使用ref

4.5 開發輔助工具