大型應用程式的前端管理是最難解決的問題之一。雖然有幾種方法可以解決狀態管理問題，但Redux和MobX是兩個最流行的外部庫，用於解決前端應用程式中的狀態管理問題。在這篇文章中，我們將研究每個庫以及它們是如何匹配的。
本文假設您對web應用程式中的狀態管理工作有一個基本的了解。普通JavaScript和Redux框架都適用於普通或不可知的框架。
ReduxRedux是一個流行的狀態管理解決方案，它結合了Flux和函數式編程概念。Redux的一些核心原則是：
Redux只有一個存儲——單一來源的真相
存儲區中的狀態是不可變的
操作會調用對存儲的更改
Reducers（減速器）更新狀態
MobXMobX是一個狀態管理解決方案，可以幫助管理應用程式中的本地狀態。
MobX的一些核心原則是：
現在讓我們比較Redux和MobX的一些關鍵特性，看看哪些特性更適合您的需求。
人氣在開始學習Redux或MobX之前，讓我們看看哪個更受歡迎。
看看下面的谷歌趨勢圖。截至2019年4月，相比MobX，Redux在谷歌上似乎是一個更受歡迎和搜索的概念。
為了深入了解他們的受歡迎因素，讓我們看看2018年JavaScript現狀調查。它發布了過去三年裡Redux和MobX在開發者中的受歡迎程度的數據。
ReduxMobx在過去的幾年裡，Redux已經獲得了大量的人氣，並且已經成為狀態管理的最佳解決方案。雖然MobX不像Redux那麼受歡迎，但它也有自己的優勢。
獲獎者：Redux
學習曲線Redux開發人員對Redux的普遍看法是它不容易學習。2018年JavaScript現狀調查分析了Redux最不受歡迎的方面。在這裡，開發人員投票認為他們不喜歡Redux的複雜性和它帶來的艱苦的學習曲線。
它需要一些時間來理解它的模式和範例。它是通量體系結構和函數式編程概念的結合。如果您是一個函數式程式設計師，您可能會發現掌握Redux更容易，而如果您來自面向對象編程背景，Redux代碼最初看起來很複雜而且很難理解。
學習Redux還意味著您需要了解像Thunk和Saga這樣的Redux中間件，這會增加更多的學習內容。
Mobx眾所周知，與Redux相比，MobX更容易掌握。大多數JavaScript開發人員都精通面向對象編程，這使得學習MobX變得簡單。另外，MobX中有很多事情是在幕後完成的，為開發人員創造了更好的學習體驗。您不必擔心狀態的規範化或實現類似Thunks的概念。由於已經內置了抽象，因此編寫的代碼更少。
獲獎者：MobX
存儲數據-單個存儲與多個存儲存儲區是我們存儲本地數據的地方。它保存整個應用程式的狀態。JSON應用程式的狀態存儲中通常包含一個巨大的對象。
Redux在Redux，只有一家商店，它是唯一的真理來源。存儲中的狀態是不可變的，這使得我們更容易知道在哪裡可以找到數據/狀態。在Redux中，雖然有一個巨大的JSON對象來表示存儲，但是您可以始終將代碼拆分為多個reducer。這樣，就可以用多個reducer在邏輯上分離關注點。對於許多開發人員來說，這是一種更直觀的方法，因為他們可以始終引用應用程式狀態的單個存儲區，並且不存在與當前數據狀態相關的重複或混淆的可能性。
Mobx另一方面，MobX允許多個商店。您可以在邏輯上分離存儲區，因此應用程式的所有狀態都不在一個存儲區中。大多數應用程式設計為至少有兩個存儲區：一個用於UI狀態，一個或多個用於域狀態。以這種方式分離存儲區的好處是，您也可以在其他應用程式中重用該域。UI存儲將特定於當前應用程式。
獲獎者：Redux
這個類別的贏家是主觀的；這取決於開發者的偏好。我個人喜歡將應用程式的整個狀態存儲在單個存儲中的想法。這有助於我把同一個地方稱為真理的唯一來源。有些人可能會說多家商店對他們更有效，更喜歡MobX。
數據結構ReduxRedux使用普通JavaScript對象作為數據結構來存儲狀態。使用Redux時，必須手動跟蹤更新。在需要維護大量狀態的應用程式中，這可能更困難。
MobxMobX使用可觀測數據。這有助於通過隱式訂閱自動跟蹤更改。在MobX中，更新是自動跟蹤的，因此對開發人員來說更容易。
獲獎者：MobX
純與不純Redux在Redux中，存儲中的狀態是不可變的，這意味著所有狀態都是只讀的。Redux中的操作可以調用對狀態的更改，reducer可以用新的狀態替換以前的狀態。這是Redux的核心原則之一。
下面是純函數的一個簡單示例：
function sumOfNumbers(a, b) { return a + b; }
函數將始終返回相同的輸出，給定相同的輸入。它沒有任何副作用或來自外界的影響。
Redux函數使用以下模式編寫。reducer是接受一個狀態和動作並返回一個新狀態的純函數。
function(state, action) => newState
這讓Redux變得純潔。如果您有興趣了解更多關於純函數以及它們在Redux中如何操作的信息，您可以閱讀本文以獲得更好的理解。這是Redux最好的特性之一。
Mobx在MobX中，狀態是可變的，這意味著您可以簡單地用新值更新狀態。這讓黑幫變得不純潔。不純函數很難測試和維護，因為它們並不總是返回可預測的輸出。
獲獎者：Redux
由於Redux存儲是純的，因此更容易預測，並且很容易恢復狀態更新。在MobX的情況下，如果操作不當，狀態更新可能會使調試更加困難。
樣板代碼Redux關於Redux最大的抱怨之一是它附帶的大量樣板代碼。當您將React與Redux集成時，會產生更多的樣板代碼。這是因為Redux本質上是顯式的，很多功能都必須顯式地編碼。
MobxMobX更隱式，不需要很多特殊工具。與Redux相比，它的樣板代碼要少得多。這使得MobX更容易學習和設置。
獲獎者：MobX
開發者社區對於開發人員社區，Redux輕而易舉地贏得了勝利。Redux附帶了reduxdev工具，供成千上萬的開發人員使用。它為調試Redux代碼提供了驚人的支持。
MobX還提供開發人員工具，但它們沒有Redux提供的相同質量的調試支持。
GitHub統計數據很好地表明了兩個庫的社區參與度。Redux擁有約48k星，超過672位投稿人。另一方面，MobX擁有大約1.9萬星和155名投稿人。
如果我們看看npm的下載量，Redux是遙遙領先的。Redux平均每周下載300萬次，MobX平均每周下載25.4萬次。這表明Redux被廣泛採用。
獲獎者：Redux
可擴展性由於Redux更加固執己見，並且期望reducer函數是純的，因此它比MobX更容易擴展。Redux的固執己見和純粹的特性使得應用程式具有可伸縮性。
純函數更容易測試，因為它們是可預測的和簡單的。這就產生了可伸縮的可維護代碼。這是選擇Redux而不是MobX的核心優勢之一。
獲獎者：Redux
結論好吧，判決結果如何？基於開發人員社區、流行度和可伸縮性，Redux的性能優於MobX。但是，如果你想快速跟上速度，用更少的樣板代碼構建簡單的應用程式，MobX可能是你的朋友。
本文：http://jiagoushi.pro/node/1281
討論：請加入知識星球【首席架構師圈】或者小號【jiagoushi_pro】或者QQ群【1110777】
微信公眾號【首席架構師智庫】