Redux 的問題:React、MobX 和 Realm 能解決嗎?

原文:The Problems with Redux: Can React, MobX, and Realm save us?

作者:Erich Reich

首先,我不討厭 Redux。它是由一個 非常聰明的人 開發的,用來緩解在單頁面應用中管理狀態的問題。而且,確實解決了這個問題。你可以使用 Redux 將狀態從高層的 store 連接到每個組件,只 map 該組件需要用到的狀態。

在本文中,我想分享我們為客戶創建移動應用的一些經驗。在 Quantum Mob,我們主要的 webapps 是由React 編寫的,而我們的移動技術棧用的是由 React Native。React Native 允許在 Android / iOS 之間共享大部分代碼,並且從產品的網頁版本重用代碼變得更容易,因為它跟普通的 React 很相似。

Redux 的問題

沒有一種適合所有場景的完美工具。即使你喜歡某種東西,也要清楚客觀地去看待它,特別是那些賣力宣傳的東西。你使用它只是因為這很酷,還是因為它是最正確的選擇?如果一個東西要求得太多,那麼它的宣傳根本對不起其本身的價值。

不用懷疑我的話,Dan Abramov 以作者身份寫了關於他對 Redux 的看法,試圖讓人們停下來考慮,Redux 是否真正適合你的項目。

如果你在用 「Redux 方式」 做事的時候感到壓力,這表明你或你的團隊可能過於看重它了。這只是你們工具箱中的一個工具,一個瘋狂的實驗。

-Dan Abramov

隨著 npm,Node 以及構建工具(grunt,gulp,webpack ...)的出現,在每個項目中需要使用的庫和框架在呈爆炸式增長。

你的項目需要處理日期嗎?為什麼不使用 MomentJs?你要處理數組嗎?再加上像 lodash 或 Ramda。如果你不使用 Babel 和 Axios,以及一個好的 CSS 框架,我不能想像那將會怎樣。必須確保編譯你的同構應用,即使這只是個 Hello World 應用。

問題一:學習曲線

Redux 引入一些概念,你需要花時間去學習它們。將需要翻閱文檔並瀏覽教程,因為不只是簡單調用保存,然後再獲取數據那麼簡單。

問題二:配置

要使用 Redux 的話,需要設計好 store,創建多個 reducer 並將其組合在一起。然後,使用 connect 或者其他什麼,為每個需要跟 store 交互的組件配置 mapStateToProps 和 mapDispatchToProps。

問題三:「最佳實踐」

對於每個組件,都有一個用於 JavaScript 的文件,一個用於樣式的文件,另一個用於 JSX。Redux 將這些東西與 action 和 reducer 文件相結合,另一個將其全部整合在一起。確實這樣很 Redux,但如果你只想某個地方使用怎麼辦?對於簡單的例子,引入像 Redux 這樣強大的工具其實是過度工程的。

備選方案

局部狀態(local state)

Redux 的另一種替代方法是保持簡單,使用組件的局部狀態。意思是保持最開始時候簡單的架構就好,只有在需要時才添加 redux。容易吧?

以下是 Dan 的一個 很好的例子,說明如何將一個簡單的計數器在不使用 Redux 的情況重構為 Redux 風格的。看看他的文章,寫得很好,他是這個話題的權威。

MobX

MobX 比 Redux 更新,現在肯定有很多討論。MobX 承諾的是提供 Redux 的所有功能,但是更少的樣板代碼。這個缺點當然是微不足道的,不應該期望它與 Redux 具有相同的控制級別。

MobX 是如何工作的?你可以創建想要 store 的數據模型作為一個 class,並將使用 @observable 裝飾器添加到 MobX 管理的地方,而不是把重點放在改變和 reduce 的細節上。

另一件事是,你的對象不必像 Redux 那樣進行歸一化處理。這在某些情況下可能是件好事,而在其他情況下也可能是件壞事。例如,有一個很大的數組,在通過它搜索某個值的時候可能會遇到性能問題,需要認識到這一點。

如果你想快速了解一下 MobX,可以從這個與 Redux 比較的4分鐘的視頻開始。

Youtube 上的視頻:Understanding MobX vs Redux

如果你喜歡 MobX 官方的說法,請查看他們的 「十分鐘介紹」。如果希望看到一個更客觀的觀點,這裡有一個開發者使用 MobX 示例 。

為 React Native 設計的 Realm

Realm 是 React 世界的另一個新增內容,但目前僅適用於 React Native。如果你正在製作移動應用,那絕對值得一看。除了存儲和管理你的域數據之外,Realm 還增加了數個與伺服器同步的數據,離線支持和加密功能。

為了幫助了解使用 Realm 的理由,他們提出了一個可以快速開始的真實世界的例子。移動應用程序通常執行多次搜索,從而本地存儲數據,以避免額外調用影響性能,並提供更好的用戶體驗。

Youtube 上的視頻:Realm

應該將 Realm 視為直接集成到應用程序中的一個資料庫。能夠提供很好的速度,因為處理的對象引用與資料庫具有相同的引用,並將其保存到本地存儲,因此任何更改或搜索都不會被序列化或發送到任何地方。

結論

沒有任何工具對於每一種情況都是完美的,並不建議徹底放棄 Redux。Redux 很棒,但隨之而來的是創建附加的樣板代碼。這將導致最後期限延長,並且留下更多需要我們維護的代碼。

在某些組件上使用局部狀態是很合適的,如果複雜性發生變化,也可以很容易地使用 Redux 重構。

雖然 MobX 和 Realm 不是作為狀態容器而設計的,但它們可以輕鬆管理大部分數據。強烈建議試試這兩個庫,看看它們是否適合你的項目。


推薦閱讀:

【React/Redux/Router/Immutable】React最佳實踐的正確食用姿勢
請教 redux 與 eventEmitter?

TAG:前端开发 | React | Redux |