2020年React Redux的5種替代方案
使用Redux替代品減少Reactor應用的樣板并減少中間商。
對于使用React，Vue或Angular作為前端框架的大多數應用程序，Redux已成為流行的狀態管理解決方案。 Redux受歡迎的主要原因之一是其輕巧的大小只有2KB。
Redux的工作原理很簡單：將應用程序的整個狀態存儲在一個中央存儲中。 所有組件都可以訪問該存儲，因此無需在組件之間傳遞參數和屬性。 Redux的主要構建模塊是其動作，Reducer和存儲。
讓我們看一下Redux是如何工作的，以便更好地了解它與其替代方案之間的區別。
因此，簡而言之，來自組件的API調用將發送到Reducers。 它們是根據對象的舊狀態返回新狀態的函數。 新狀態存儲在存儲中，該存儲是Redux應用程序中訪問先前狀態的中央實體。
除了保持應用程序狀態并控制對其的訪問之外，存儲還允許更新狀態并通過訂閱來處理偵聽器的注冊和注銷。
為什么我們需要Redux的替代產品?
Redux及其用法聽起來很簡單，但是存在一些缺點：
- 這涉及相當多的學習曲線。 學習Redux可能會變得更加困難，因為必須具備函數式編程知識。
- 它增加了用于簡單更改的樣板。 由于redux中的流是預定義的，因此您必須堅持下去。 在較小的應用程序中，樣板文件的數量似乎更多。
- Redux中即使是很小的更改也會觸發DOM重組過程。 開發人員不贊成這樣做，因為它很耗時，并且會對性能產生不利影響。
Redux的替代品
1. MobX
MobX通過應用反應式編程的概念來同步模型和UI。 它僅更新UI的必需部分，而不是完全重新加載它。 MobX致力于應用程序的面向對象概念和數據模型。 MobX簡化了類和存儲的文檔，其中包括應用程序中使用的屬性和方法。 它通過在開發過程中快速交付UI對象來支持快速開發，并允許添加生命周期掛鉤" componentWillReact()"以進行響應式更新。 這簡化了應用程序的路由和導航。
> https://mobx.js.org/
由于MobX基于類，因此對象的序列化并不像JavaScript那樣簡單。 建議編寫自定義序列化和反序列化方法。 MobX要求數據通過API調用進行序列化。
建議使用MobX創建用于撤消/重做的自定義函數，以及數據更改的時程。 以下是MobX的主要功能：
- 它具有可伸縮性，易于使用且不允許規范化數據。
- 它映射狀態和派生之間的關系，同時保持引用完整性，從而減少錯誤的數量。
- 它通過構建虛擬派生圖來最小化保持派生與狀態同步所需的重新計算次數，從而簡化了狀態修改。
- 它是一個JavaScript庫，因此，您可以保留JavaScript的現有實用程序。
- 它可以在客戶端和服務器端使用。
這是使用MobX記錄時間的示例。 它使用Observable概念來跟蹤時間：
基于其透明的反應式編程，MobX被廣泛用作Redux的替代品。
2. Apollo GraphQL
Apollo GraphQL促進了將現代應用程序連接到云的數據圖層。 React與需要從服務器獲取數據的REST API一起使用。 在現代和連接的系統中，有必要獲取大量數據。 但是，這是不可行的。 GraphQL通過允許組件聲明數據來彌合這種差距。 強大的端到端鍵入功能可提高服務器與應用程序之間的性能。
該平臺在集中位置管理數據。 您可以簡單地連接平臺或微服務，并在這些系統之間連接必要的數據。 GraphQL進行數據獲取和數據轉換。 通過創建抽象層，它有助于使服務解耦。 GraphQL獨立于平臺和語言。
ApolloBoost入門工具包可用于集成Apollo GraphQL。 您可以使用此工具包配置客戶端。 它包括身份驗證，內存緩存，狀態管理和錯誤處理。 Apollo GraphQL還提供了自定義Apollo Boost所需的文檔。
讓我們考慮創建Apollo客戶端的示例。 對于Apollo客戶端，您需要GraphQL的端點。 例如：
https：//48p1r2roz4.sse.codesandbox.io，這是阿波羅(Apollo)提供的游樂場。
接下來，將您的Apollo Boost連接到React客戶端。
連接查詢組件后，服務器將在發送數據時自動對其進行緩存。 為了自定義端點，Apollo Boost提供了構建Apollo客戶端所需的多個軟件包。
3. 上下文API和React掛鉤
自從鉤子創建以來，便已與上下文API結合使用來管理狀態。
為什么要使用鉤子和上下文? 我個人更喜歡在中小型應用程序中使用它們，因為它們使我更容易將可重復使用的組件發布到Bit(UI組件以及"智能"組件)。
未發布的組件將不會很難在其他項目中重復使用，因此請牢記這一點。
> Example: Exploring React components published to Bit.dev
我們創建一個UI，以在單擊按鈕時顯示令牌。 在React應用程序中，創建一個名為" context"的新文件夾并定義TokenContext.js。 我們將定義令牌狀態并將其設置為" 0"。 組件將使用TokenContext.Provider訪問狀態。
現在，我們創建一個類來顯示令牌。
下一步是創建用于增加和減少令牌的按鈕。 讓我們創建TokenButton.js文件。
創建一個顯示類來設置UI。
現在，我們將創建一個名為TokenView.js的容器，以允許訪問userContext掛鉤。 現在，在視圖文件夾中創建一個視圖類，如下所示：
現在，將視圖文件導入App.js。
它將輸出以下結果。
4. PullState
PullState的工作方式與Redux類似，但是不支持類。 它使用鉤子進行全局狀態管理。 可以使用鉤子啟動多個存儲，并使用" useState"從狀態訪問值。 您可以創建一個商店，并使用" userState()"鉤子使用商店的狀態。 使用掛鉤，我們確保為組件使用所需的狀態。
這是使用PullState更改樣式屬性的示例。 首先，為您的主題創建一個商店。
接下來，我們將讀取狀態并在單擊按鈕時切換狀態。
5. RxJS
RxJS是一個反應式擴展JS庫(RxJS)，它使用Observables進行異步調用。 它基于事件，并與Redux結合使用。 RxJS為應用程序提供了更好的性能和模塊化，顯示了更好的可調試調用堆棧，并具有向后兼容性。 RxJS中最常用的概念是Observable，Scheduler和Subject。
這是RxJS的自定義鉤子的簡單片段，其中：
- 使用" useEffect"鉤子訂閱一個Observable
- 設置更改狀態
- 清理功能
結論
我們研究了Redux的一些最常用的替代方法，它們可以獨立工作或可以與React應用程序中的redux交互。 MobX和Apollo GraphQL使用最廣泛，并且分別以性能和連接許多不同平臺的能力而著稱。
許多其他人更喜歡Reactive Extension JS(RxJS)庫，因為它使用Hooks代替Redux。 因此，最終歸結為最適合您的項目的項目。
