[譯] 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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。