[譯] React & Redux 頂級開發伴侶

• 原文地址：Top React and Redux Packages for Faster Development
• 原文作者：Arfat Salman
• 譯文出自：掘金翻譯計劃
• 本文永久連結：github.com/xitu/gold-m…
• 譯者：劉嘉一
• 校對者：wznonstop

圖注：選自 Unsplash，由 Fleur Treurniet 拍攝

React 已成為近年來最炙手可熱的前端開發框架。圍繞 React 生態湧現了一系列趁手的輔助開發工具，它們的出現能進一步提高我們的開發效率。要知道，我們也一直期望使用的開發工具可以

圖注：選自 Giphy

如果你剛踏入 React 開發大門，那對你來說下面介紹的工具包都還蠻有用，它們可以在除錯應用或者視覺化應用中的抽象邏輯時幫上大忙。

話不多說，讓我們開始吧！

React Storybook

在你開發 React 應用時，總會有這樣的念頭湧上心頭：面對一些你使用或正在編寫的元件，要是能直觀地看到它們在不同 prop、state 和 action 的組合下所呈現的渲染效果就好了。 嗯，Storybook 正是這樣一個你想要的工具。

React Storybook 為 React 搭建了視覺化開發環境。你可以使用它展示一個元件庫，並檢視各個元件在不同狀態下的渲染效果，通過與元件進行互動你可以更好地開發和測試。 使用 Storybook 可以觀察變化的 state 和 prop 對元件渲染的影響，加快了元件原型的開發。點此 檢視 Storybook 的 GitHub 倉庫。

Storybook 提供的 官方示例 不容錯過。

圖注：Storybook 倉庫 中的 Demo

Stroybook 其他亮點如下 ——

• Storybook 獨立執行，不干擾你的應用。
• 這使得元件能夠獨立於應用進行開發。
• 這意味著你在開發元件時不需要操心任何依賴相關的問題。

這裡還有一些與 Stroybook 類似的工具：React Cosmos，React Styleguidist

React Dev Tools

這是 React 界最負盛名的開發工具包。使用它可以讓你像審查 HTML 元素一樣審查 React 元件和元件之間的層級關係，包括審查元件的 prop 和 state 情況。 除此之外，你還可以使用正規表示式搜尋、審查特定的元件，並通過使用 “Highlight Updates” 這樣精妙的功能檢視選中的元件是如何影響其他元件渲染的。

圖注：React Dev Tools Demo

你可以將 React Dev Tools 新增為 Google Chrome 的 extension 或 Firefox 的 add-on。同樣，你也可以下載 軟體包 將 React Dev Tools 作為獨立應用裝到本地，獨立安裝與新增 extension（或 addon）一樣都非常簡單易於上手。以 Chrome 為例，當你安裝完成後，Chrome Developers Tools 頁面會新增一個 “React” 標籤。

圖注：React Dev Tools 中的 Highlight Updates 功能

使用祕訣 ——

• Highlight Updates： 注意觀察上面 GIF 圖中 Submit 按鈕下方出現的彩色線條。這表明每當我在 input 中進行輸入，整個元件都會被重新渲染！
• 在相互獨立的元件範圍內，如果在某個元件上觸發的 action 會同時觸發其他元件進行重新渲染，這樣的行為顯然不太合理，其背後的原因需要好好琢磨。
• 大多數情況下，元件都被設計得過於龐大，若把這些大元件重構為更小、模組性更高的數個小元件更為合適。
• 你可以在工具皮膚右側看到元件當前的 prop 和 state（email 和 password）。這個功能的確很酷，你可以在這觀察到 app 中任意一處的 state 變化及其產生的影響。

Why did you update？

我們在上一節中提到了元件冗餘重渲的問題，不過想一眼看出某個元件的重新渲染是否多餘卻並不那麼容易。幸好有這麼一個工具包替你承包了這項工作，每當有元件進行不必要重渲的時候，它會在控制檯進行提醒。 該工具包會跟蹤元件的 prop 和 state 狀態，若元件在任一狀態未發生變化的情況下進行了重渲，那麼該工具包就會在控制檯列印出相關資訊。它的 GitHub 地址在 這兒，另外要記住不要在生產環境時使用該包。

圖注：Why did you update 官方示例圖

Create React App（CRA）

嚴格意義上來講這並不是一個開發工具，但是多年的使用讓我發現它是快速建立 React 原型專案的不二人選。設定好一個 React 專案的開發環境並不簡單，其中包含的眾多依賴包如 Babel、webpack 等，對於新手來說都不是一下就能弄明白的。為此，我專門寫了 Yet another Beginner’s Guide to setting up a React Project 系列文章，包含 Part 1 和 Part 2 兩部分內容。在文章中我講解了 JSX、Babel 和 webpack 的概念以及為何使用它們。

在弄清楚這些基礎概念後，每每建立一個新的專案，你都需要重複一系列相同的開發環境設定工作。而且，你還 有可能 需要同時建立多個這樣的專案。因此，為了節約開發者的時間，Facebook 把所有的繁瑣工作都封裝到了一個工具包中，點此 瞭解一下。

圖注：成功執行 create-react-app 的返回結果

---

你有極大可能選擇了 Redux 來管理你 React 應用中的 state，下面將介紹一些專屬 Redux 的工具 —

Redux Dev Tools

像 React 一樣，Redux 也有它的 Dev Tools，也同樣可以通過 Chrome Extension 或 Firefox addon 進行安裝。它的功能有 ——

• 你可以使用它審查每個 state 和 action payload。
• 你可以使用它及時 “取消” 發出的 action 以回退到之前的狀態，這個功能也被稱作 除錯時光機。 Redux Dev Tools 的作者 Dan Abramov 自行製作了一個不錯的 視訊 來演示時光機功能。
• 如果你中途改變了 reducer 的程式碼，所有已經被記錄下來的 action 都會按照新的 reducer 重新計算。
• 如果 reducer 程式碼拋異常了，你可以看到發生異常時的 action 和具體的錯誤資訊。
• Dev tools 的日誌介面（LogMonitor）可以完全按照你的意願進行定製。因為它本質上就是個 React 元件，所以定製它並不是什麼難事。作者 Dan Abramov 也強烈建議你 定製 屬於自己的 LogMonitor。

由其他開發者分享的定製 LogMonitor 有：Diff Monitor、Inspector、Filterable Log Monitor 和 Chart Monitor。

redux-immutable-state-invariant

由於有函數語言程式設計風格和 redux 機制上的限制，我們永遠都不應該直接 “修改” state 的值。不過話說回來，我們並不好區分何時是在顯式 “修改” state 值，而何時是在 “替換” state 值。

這裡推薦的 redux 中介軟體可以確保你遠離不經意間的 “修改”，若你確實 “修改” 了 state 值，該中介軟體會直接丟擲相應的異常進行提醒。更多相關內容 點此 檢視。

圖注：“修改” state 值時將丟擲錯誤

使用祕訣 ——

• 需要確保 state 中不含任何不可以序列化的值，如函式。否則，中介軟體會丟擲 RangeError: Maximum call stack size exceeded 異常。
• 需要確保 不要 在生產環境中使用該中介軟體，因為它包含了很多物件複製的工作，會拖慢你的線上應用。

redux-diff-logger

無論你是使用 console.log 列印 state，還是使用 debugger 啟動 dev tools 審查、除錯 state，你其實都是想捕捉 state 中前後 發生變化的值。Redux diff logger 正能肩負此任，它會列印出 state 中所有發生變化的值。

圖注：redux-diff-logger 官方示例圖

要是你並不是只想看到發生變化的值，而是想 “縱觀全域性”。那麼你也太走運了，作者還分享了另一個 logger 工具：redux-logger。

---

我還寫了 Top Webpack Plugins for faster development，其中羅列了一堆改善 “開發生活質量” 的 webpack 外掛。

---

我們的團隊 一直歡迎有才能、富有好奇心的朋友加入。

我每週都會寫一些關於 JavaScript、web 開發或電腦科學內容的文章，快來關注我吧。

在這些地方可以找到我 @ Facebook @ Linkedin @ Twitter。

---

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。