解析 React.js 專案架構 從資料流、副作用、常用工具去簡化架構

解析常見的 React.js 專案架構

React 是 component-based 的前端 UI 函式庫，通常會配合其他函式庫使用:

• react-router: 處理 SPA 的路由
• redux: 做統一的狀態管理，協助元件之間的溝通
  • redux-thunk or redux-saga: 處理 AJAX 的 side effect

資料流管理

Redux 主要就是做為元件之間需要溝通工具，有以下特性:

• 單向資料流
• 公共的狀態儲存 (Store)

專案架構也會受到這種概念去分類:

• actions: 觸發狀態改變用的 function
• pages: 頁面容器元件
• containers: 有連接 Store
• components: 沒有連接 Store
• reducers: 收到 action 後的資料邏輯

Side Effect 處理

平常不太會去特別注意的名詞，我們用這個來分類 function 或元件:

• Pure function or UI 元件
  • 每次送進去固定的輸入，出來就會是固定的結果
  • 相同的 props, 產生相同的 component，會放在 components 資料夾
  • 不寫商業邏輯
  • 不加入有 side effect 的 code
• 有 side effect 的 function or 元件
  • 因為與狀態相關所以就會放在 containers 資料夾
  • AJAX，相關程式在 react hooks 中就會放在 useEffect，class component 就會放在 componentDidMount
  • AJAX 跟 redux，side effect 交給 redux-thunk 或是 redux-saga 去管理

最近開始接觸單元測試後，也深刻感覺到 side effect 越少，測試也越好寫，所以我想如果刻意去寫出好測試的元件，最後也會讓專案的結構變得更好偵錯與維護。

常用第三方工具

• classnames: 讓我們更方便的使用 JavaScript 去套入條件動態的操作 class
• gh-pages: 發佈到 github pages 的工具
• humps: 將收到的資料格式轉成駝峰式
• node-sass: 讓專案能夠使用 scss
• eslint-*, lint-staged, husky, prettier: coding style 交給編輯器處理

簡化架構的函式庫與框架

對於專案或是後端收到的資料，若沒有太多需要客製化的部分，可用底下函式庫與框架簡化:

• storybook: 用故事書元件的角度設計，元件通常就能夠獨立且好測試
• 將 Redux 常用的寫法封裝來減少寫太多重複的程式碼，簡化架構
  • Redux Toolkit
    • RTK Query
    • createSlice
  • redux-api
    • 使用配置檔取代 redux 的專案中沒特殊處理的 action, reducers, API 的 CRUD
• axios，Promise based HTTP client for the browser and node.js
  • 前後端共構
  • 使用客製化 instance 的方式可以將收跟送的邏輯統一實作，減少重複的程式碼
• Next.js，是一套以 React.js 生態系打造出來的完整的框架，幫我們配置了
  • AMP
  • 路由
  • CSS-in-JS
  • 靜態頁面輸出
  • 伺服器渲染

專案架構

以最近弄的小專案當例子，如果有加上 redux 的話，專案架構大概會長成下面的樣子，在比較簡單的專案中可以更簡化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

├── .storybook
├── src/
│  ├── constants/ 
│  ├── utils/
│  ├── pages/ 
│  ├── containers/              # containers 放置與 Redux 連接的相關元件，單元測試檔案為 `元件名稱.test.js`
│  ├── components/              # components 放置相關元件，單元測試檔案為 `元件名稱.test.js`
│  │  └── Root.js               # 路由根目錄
│  ├── hooks/                   # hooks 相關
│  ├── middleware/              # 資料處理相關
│  │  ├── API.js                # axios 的 instance
│  │  └── redux-api.js          # redux-api
│  ├── styles/                  # 樣式檔們
│  ├── index.js                 # 程式入口
│  ├── serviceWorker.js
│  └── setupTests.js            # 測試相關設定
├── .eslintrc                   # ESLint 設定檔
├── .prettierrc                 # prettierrc 工具設定
├── .travis.yml                 # 持續發佈工具
├── package-lock.json
├── package.json
└── README.md

資料夾架構

對新加入專案的工程師來說，最多的時間就是花在找尋相關的程式，其實可以透過小訣竅可以去優化前端開發者體驗，那在資料夾的架構方面，其實很簡單的透過把相近功能的程式碼放在一起 (Co-located) 就可以大量省去尋寶的時間，也能夠更方便的管理。

比較大的專案，就會把相關功能的元件都放在同個資料夾中降低相依性、增加內聚性，這樣在維護和修改時可以確定只要照顧好這個資料夾中的檔案即可。

1
2
3
4
5
6
7

├── Login/
│  ├── SocialButton/
│  │  ├── LineButton.js         # 社群登入的 Line 按鈕
│  │  └── FacebookButton.js     # 社群登入的 FB 按鈕
│  ├── Modal/
│  │  └── ModalLogin.js         # 登入的 Modal
│  └── index.js                 # 登入邏輯與主要 Layout

比較小的專案

1
2
3
4
5
6
7
8
9
10

api/
├─ ProfileAPI.js
└─ UserAPI.js
components/
├─ Footer.js
├─ Footer.css
├─ Profile.js
├─ ProfileHeader.js
└─ ProfileHeader.css

• ← 上一篇
• 下一篇 →