Unifie by Typeless

Unifie by Typeless

Typeless · 程式設計

Unifie by Typeless 是給 React 應用程式用的免費 TypeScript 工具組,把 action 建立函式、reducers 與 RxJS epics 整合成開發者用的一項工具。

Unifie by Typeless 的介面預覽

關於 Unifie by Typeless

什麼是 Unifie by Typeless

Unifie by Typeless 是給以 TypeScript 打造 React 應用程式的團隊用的開發工具組。你不必拼湊半打小型函式庫,就能從單一套件取得 actions、reducers 與副作用處理。這個專案建立在 typeless 函式庫之上,後者把 TypeScript 與 React hooks、RxJS 配在一起。

如果你曾經追查過某個由散落的 action 型別字串、或收到錯誤 payload 形狀的 reducer 所引起的 bug,就會明白這種組合為何重要。Unifie 依靠 TypeScript 的型別推斷,編譯器會從你的初始狀態推導出多數型別。你要寫的註記少得多。不相符的地方會在建置時浮現,而不是在正式環境。對多數團隊來說,這是筆划算的交換。那麼,誰該考慮它?

有個細節值得先講清楚。TypeScript 的型別系統在這裡扛下重活。在大型程式碼庫上,編輯器在計算整個狀態層的推斷型別時會變慢。移除樣板程式碼的同一套設計,也對你的工具鏈造成壓力。如果你維護的是中大型應用程式,就要有調整設定的準備。否則存檔時會明顯感到延遲。

開始使用

  1. 用 npm 或 yarn 安裝這個函式庫與它的 peer 相依套件,也就是 React 16.8 或更新版本,加上 RxJS 6。
  2. 用 DefaultTypelessProvider 包住應用程式根層,讓各模組能註冊自己的狀態與副作用。
  3. 為每個功能建立一個模組,拆成符號檔、定義 actions 的介面檔,以及存放 reducer 與 epic 的模組檔。
  4. 在功能的進入元件中呼叫模組 hook 來載入 reducer 與 epic,接著從你的元件派發 actions。

產品資訊

快速了解 Unifie by Typeless 的定價、支援平台與效能。

免費方案是
付費方案$0
平台Web (React apps)
開發者Typeless
類別程式設計
發布日期Jun 2019
最近更新Sep 2020
網站訪問量1.1K
網站全球排名13.8M
API 提供狀態是

適合對象

這項工具最適合的使用者、任務與情境。

使用者

  • 在 TypeScript 中工作、想讓整個狀態層的型別自動推斷而非手寫的 React 開發者
  • 維護大型應用程式、厭倦散落 action 型別字串的前端團隊
  • 已經熟悉 RxJS、想在同一個工具裡處理副作用的工程師

任務

  • 在眾多元件之間管理共用應用程式狀態,而不必用單一臃腫的 store 檔案
  • 透過會回應已派發 actions 的 epics,處理資料抓取之類的非同步副作用
  • 依功能拆分 reducers 與 epics,讓每個只在對應元件掛載時載入

情境

  • 從第一天就掌控技術堆疊、能押注 TypeScript 的全新 React 專案
  • 把日益成長的應用程式從臨時拼湊的狀態函式庫,遷移到單一具型別的做法
  • 已經使用 React hooks、想要狀態與 actions 也採同一套 hook 風格的團隊

主要功能

以最少註記取得推斷型別

這個工具組會從你提供的初始值讀出狀態形狀,據此推斷 actions、reducers 與 epics 的型別。你很少需要手寫介面定義。實務上,開發者改動一個狀態欄位,編譯器就標出每一個會壞掉的地方,減少重構時的瞎猜。

單一模組內的 action 建立函式與 reducers

每個功能都有自己的模組,在同一處宣告 actions 並搭配 reducer 邏輯。應用程式成長時,沒有中央 reducers 檔案要維護。actions 帶著具型別的 payloads,reducer 因此確切知道收到什麼資料,無需額外檢查。

用 RxJS epics 處理副作用

副作用透過建立在 RxJS 上的 epics 執行。一個 epic 監聽特定 action 並回傳新的 action,讓網路請求之類的非同步流程更容易推理。如果你沒用過 RxJS,這部分有學習曲線。用過的開發者說它融入得很自然。

隨需載入與程式碼分割

reducers 與 epics 會在 React 元件掛載時載入,而不是在啟動時。這表示程式碼分割天生就能運作,某功能的狀態邏輯只在有人開啟它時才一起進來。文件特別強調,沒有單一 epics 檔案把一切拉進初始打包。

熱模組替換支援

開發期間狀態邏輯會就地重新載入,不必整頁重新整理,而符號放在各自的檔案裡,讓 HMR 在你編輯時持續運作。這是個小細節,但在你反覆調整 reducer 時省下大量點擊。

React hooks 整合

元件呼叫 hooks 來讀取狀態與派發 actions,與現今多數 React 開發者使用的風格一致。你可以略過舊式的 connect 接線。actions 透過同一套 hook 模式進來,元件程式碼因此保持精簡。

優缺點

優點

  • 型別從你的初始狀態流出,你寫的註記更少,並在建置時抓到錯誤
  • actions、reducers 與 epics 集中在一項工具,而非幾個鬆散連結的函式庫
  • 依功能的模組與隨需載入讓初始打包保持精簡
  • 依 MIT 授權免費且開源,完全沒有付費層級

缺點

  • 大量型別推斷會拖慢大型程式碼庫上的編輯器,你可能得調整設定
  • 對沒接觸過反應式串流的開發者而言,RxJS epics 帶來學習曲線
  • 每個功能都要有符號、介面與模組檔的明確模組結構,在小應用程式上顯得是額外負擔
  • 相較於主流狀態函式庫,文件與社群規模偏小,排錯較依賴原始碼

常見問題

它是用來在以 TypeScript 撰寫的應用程式中處理 React 狀態管理與副作用的工具組。你用它定義 actions、reducers 與透過 epics 的非同步流程,無需拼裝多個獨立函式庫。