React + Redux 是React生態中使用最頻繁的技術棧,但關於如何組織React+Redux的專案結構,一直都有多種聲音。本文將討論其中最常用的3種專案結構,並給出個人的最佳實踐。
-
按照型別
這裡的型別指的是一個檔案在專案中充當的角色型別,即這個檔案是一個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,如果action type是放在另外一個資料夾的話,還需要在這個資料夾下增加新的action type檔案。所以,開發一個功能時,你需要頻繁的切換路徑,修改不同的檔案。當專案逐漸變大時,這種專案結構是非常不方便的。
-
按照功能
一個功能模組對應一個資料夾,這個功能所用到的container、component、action、reducer等檔案,都存放在這個資料夾下。如下所示:
feature1/ components/ actions.js container.js index.js reducer.js feature2/ components/ actions.js container.js index.js reducer.js index.js rootReducer.js 複製程式碼
這種專案結構的好處顯而易見,一個功能中使用到的元件、狀態和行為都在同一個資料夾下,方便開發,易於功能的擴充套件,Github上很多腳手架也選擇了這種目錄結構,如https://github.com/react-boilerplate/react-boilerplate 。但這種結構也有一個問題,Redux會將整個應用的狀態作為一個store來管理,不同的功能模組之間可以共享store中的部分狀態(專案越複雜,這種場景就會越多),於是當你在feature1的container中dispatch一個action,很可能會影響feature2的狀態,因為feature1和feature2共享了部分狀態,會響應相同的action。這種情況下,不同模組間的功能被耦合到了一起。
-
Ducks
Ducks其實是對一種新的Redux專案結構的提議。它提倡將相關聯的reducer、action types和action寫到一個檔案裡。本質上是以應用的狀態作為模組的劃分依據,而不是以介面功能作為劃分模組的依據。這樣,管理相同狀態的依賴都在同一個檔案中,不管哪個容器元件需要使用這部分狀態,只需要在這個元件中引入這個狀態對應的檔案即可。這樣的一個檔案(模組)如下:
// widget.js // Actions const LOAD = 'widget/LOAD'; const CREATE = 'widget/CREATE'; const UPDATE = 'widget/UPDATE'; const REMOVE = 'widget/REMOVE'; const initialState = { widget: null, isLoading: false, } // Reducer export default function reducer(state = initialState, action = {}) { switch (action.type) { LOAD: //... CREATE: //... UPDATE: //... REMOVE: //... default: return state; } } // Action Creators export function loadWidget() { return { type: LOAD }; } export function createWidget(widget) { return { type: CREATE, widget }; } export function updateWidget(widget) { return { type: UPDATE, widget }; } export function removeWidget(widget) { return { type: REMOVE, widget }; } 複製程式碼
整體的目錄結構如下:
components/ (應用級別的通用元件) containers/ feature1/ components/ (功能拆分出的專用元件) feature1.js (容器元件) index.js (feature1對外暴露的介面) redux/ index.js (combineReducers) module1.js (reducer, action types, actions creators) module2.js (reducer, action types, actions creators) index.js 複製程式碼
在前兩種專案結構中,當container需要使用actions時,可以通過
import * as actions from 'path/to/actions.js'
方式,一次性把一個action檔案中的所有action creators都引入進來。但在使用Ducks結構時,action creators和reducer定義在同一個檔案中,import *
的匯入方式會把reducer也匯入進來(如果action types也被export,那麼還會匯入action types)。我們可以把action creators和action types定義到一個名稱空間中,解決這個問題。修改如下:// widget.js // Actions export const types = { const LOAD : 'widget/LOAD', const CREATE : 'widget/CREATE', const UPDATE : 'widget/UPDATE', const REMOVE : 'widget/REMOVE' } const initialState = { widget: null, isLoading: false, } // Reducer export default function reducer(state = initialState, action = {}) { switch (action.type) { types.LOAD: //... types.CREATE: //... types.UPDATE: //... types.REMOVE: //... default: return state; } } // Action Creators export const actions = { loadWidget: function() { return { type: types.LOAD }; }, createWidget: createWidget(widget) { return { type: types.CREATE, widget }; }, updateWidget: function(widget) { return { type: types.UPDATE, widget }; }, removeWidget: function(widget) { return { type: types.REMOVE, widget }; } } 複製程式碼
這樣,我們在container中使用actions時,可以通過
import { actions } from 'path/to/module.js'
引入,避免了引入額外的物件,也避免了import時把所有action都列出來的繁瑣。現在的Ducks結構就是我專案中正在使用的專案結構,用起來還是很順暢的,歡迎大家提出改進建議!
歡迎關注我的公眾號:老幹部的大前端,領取21本大前端精選書籍!