2020年React Redux的5種替代方案

作者：聞數(shù)起舞 2020-06-12 08:22:27

讓我們看一下Redux是如何工作的，以便更好地了解它與其替代方案之間的區(qū)別。

使用Redux替代品減少Reactor應(yīng)用的樣板并減少中間商。

對(duì)于使用React，Vue或Angular作為前端框架的大多數(shù)應(yīng)用程序，Redux已成為流行的狀態(tài)管理解決方案。 Redux受歡迎的主要原因之一是其輕巧的大小只有2KB。

Redux的工作原理很簡(jiǎn)單：將應(yīng)用程序的整個(gè)狀態(tài)存儲(chǔ)在一個(gè)中央存儲(chǔ)中。所有組件都可以訪問(wèn)該存儲(chǔ)，因此無(wú)需在組件之間傳遞參數(shù)和屬性。 Redux的主要構(gòu)建模塊是其動(dòng)作，Reducer和存儲(chǔ)。

[[329880]]

讓我們看一下Redux是如何工作的，以便更好地了解它與其替代方案之間的區(qū)別。

因此，簡(jiǎn)而言之，來(lái)自組件的API調(diào)用將發(fā)送到Reducers。它們是根據(jù)對(duì)象的舊狀態(tài)返回新?tīng)顟B(tài)的函數(shù)。新?tīng)顟B(tài)存儲(chǔ)在存儲(chǔ)中，該存儲(chǔ)是Redux應(yīng)用程序中訪問(wèn)先前狀態(tài)的中央實(shí)體。

除了保持應(yīng)用程序狀態(tài)并控制對(duì)其的訪問(wèn)之外，存儲(chǔ)還允許更新?tīng)顟B(tài)并通過(guò)訂閱來(lái)處理偵聽(tīng)器的注冊(cè)和注銷。

為什么我們需要Redux的替代產(chǎn)品?

Redux及其用法聽(tīng)起來(lái)很簡(jiǎn)單，但是存在一些缺點(diǎn)：

這涉及相當(dāng)多的學(xué)習(xí)曲線。學(xué)習(xí)Redux可能會(huì)變得更加困難，因?yàn)楸仨毦邆浜瘮?shù)式編程知識(shí)。
它增加了用于簡(jiǎn)單更改的樣板。由于redux中的流是預(yù)定義的，因此您必須堅(jiān)持下去。在較小的應(yīng)用程序中，樣板文件的數(shù)量似乎更多。
Redux中即使是很小的更改也會(huì)觸發(fā)DOM重組過(guò)程。開(kāi)發(fā)人員不贊成這樣做，因?yàn)樗芎臅r(shí)，并且會(huì)對(duì)性能產(chǎn)生不利影響。

Redux的替代品

1. MobX

2020年React Redux的5種替代方案

MobX通過(guò)應(yīng)用反應(yīng)式編程的概念來(lái)同步模型和UI。它僅更新UI的必需部分，而不是完全重新加載它。 MobX致力于應(yīng)用程序的面向?qū)ο蟾拍詈蛿?shù)據(jù)模型。 MobX簡(jiǎn)化了類和存儲(chǔ)的文檔，其中包括應(yīng)用程序中使用的屬性和方法。它通過(guò)在開(kāi)發(fā)過(guò)程中快速交付UI對(duì)象來(lái)支持快速開(kāi)發(fā)，并允許添加生命周期掛鉤" componentWillReact()"以進(jìn)行響應(yīng)式更新。這簡(jiǎn)化了應(yīng)用程序的路由和導(dǎo)航。

2020年React Redux的5種替代方案

> https://mobx.js.org/

由于MobX基于類，因此對(duì)象的序列化并不像JavaScript那樣簡(jiǎn)單。建議編寫(xiě)自定義序列化和反序列化方法。 MobX要求數(shù)據(jù)通過(guò)API調(diào)用進(jìn)行序列化。

建議使用MobX創(chuàng)建用于撤消/重做的自定義函數(shù)，以及數(shù)據(jù)更改的時(shí)程。以下是MobX的主要功能：

它具有可伸縮性，易于使用且不允許規(guī)范化數(shù)據(jù)。
它映射狀態(tài)和派生之間的關(guān)系，同時(shí)保持引用完整性，從而減少錯(cuò)誤的數(shù)量。
它通過(guò)構(gòu)建虛擬派生圖來(lái)最小化保持派生與狀態(tài)同步所需的重新計(jì)算次數(shù)，從而簡(jiǎn)化了狀態(tài)修改。
它是一個(gè)JavaScript庫(kù)，因此，您可以保留JavaScript的現(xiàn)有實(shí)用程序。
它可以在客戶端和服務(wù)器端使用。

這是使用MobX記錄時(shí)間的示例。它使用Observable概念來(lái)跟蹤時(shí)間：

基于其透明的反應(yīng)式編程，MobX被廣泛用作Redux的替代品。

2. Apollo GraphQL

2020年React Redux的5種替代方案

Apollo GraphQL促進(jìn)了將現(xiàn)代應(yīng)用程序連接到云的數(shù)據(jù)圖層。 React與需要從服務(wù)器獲取數(shù)據(jù)的REST API一起使用。在現(xiàn)代和連接的系統(tǒng)中，有必要獲取大量數(shù)據(jù)。但是，這是不可行的。 GraphQL通過(guò)允許組件聲明數(shù)據(jù)來(lái)彌合這種差距。強(qiáng)大的端到端鍵入功能可提高服務(wù)器與應(yīng)用程序之間的性能。

該平臺(tái)在集中位置管理數(shù)據(jù)。您可以簡(jiǎn)單地連接平臺(tái)或微服務(wù)，并在這些系統(tǒng)之間連接必要的數(shù)據(jù)。 GraphQL進(jìn)行數(shù)據(jù)獲取和數(shù)據(jù)轉(zhuǎn)換。通過(guò)創(chuàng)建抽象層，它有助于使服務(wù)解耦。 GraphQL獨(dú)立于平臺(tái)和語(yǔ)言。

2020年React Redux的5種替代方案

ApolloBoost入門(mén)工具包可用于集成Apollo GraphQL。您可以使用此工具包配置客戶端。它包括身份驗(yàn)證，內(nèi)存緩存，狀態(tài)管理和錯(cuò)誤處理。 Apollo GraphQL還提供了自定義Apollo Boost所需的文檔。

讓我們考慮創(chuàng)建Apollo客戶端的示例。對(duì)于Apollo客戶端，您需要GraphQL的端點(diǎn)。例如：

https：//48p1r2roz4.sse.codesandbox.io，這是阿波羅(Apollo)提供的游樂(lè)場(chǎng)。

接下來(lái)，將您的Apollo Boost連接到React客戶端。

連接查詢組件后，服務(wù)器將在發(fā)送數(shù)據(jù)時(shí)自動(dòng)對(duì)其進(jìn)行緩存。為了自定義端點(diǎn)，Apollo Boost提供了構(gòu)建Apollo客戶端所需的多個(gè)軟件包。

3. 上下文API和React掛鉤

自從鉤子創(chuàng)建以來(lái)，便已與上下文API結(jié)合使用來(lái)管理狀態(tài)。

為什么要使用鉤子和上下文? 我個(gè)人更喜歡在中小型應(yīng)用程序中使用它們，因?yàn)樗鼈兪刮腋菀讓⒖芍貜?fù)使用的組件發(fā)布到Bit(UI組件以及"智能"組件)。

未發(fā)布的組件將不會(huì)很難在其他項(xiàng)目中重復(fù)使用，因此請(qǐng)牢記這一點(diǎn)。

2020年React Redux的5種替代方案

> Example: Exploring React components published to Bit.dev

我們創(chuàng)建一個(gè)UI，以在單擊按鈕時(shí)顯示令牌。在React應(yīng)用程序中，創(chuàng)建一個(gè)名為" context"的新文件夾并定義TokenContext.js。我們將定義令牌狀態(tài)并將其設(shè)置為" 0"。組件將使用TokenContext.Provider訪問(wèn)狀態(tài)。

現(xiàn)在，我們創(chuàng)建一個(gè)類來(lái)顯示令牌。

下一步是創(chuàng)建用于增加和減少令牌的按鈕。讓我們創(chuàng)建TokenButton.js文件。

創(chuàng)建一個(gè)顯示類來(lái)設(shè)置UI。

現(xiàn)在，我們將創(chuàng)建一個(gè)名為T(mén)okenView.js的容器，以允許訪問(wèn)userContext掛鉤。現(xiàn)在，在視圖文件夾中創(chuàng)建一個(gè)視圖類，如下所示：

現(xiàn)在，將視圖文件導(dǎo)入App.js。

它將輸出以下結(jié)果。

4. PullState

2020年React Redux的5種替代方案

PullState的工作方式與Redux類似，但是不支持類。它使用鉤子進(jìn)行全局狀態(tài)管理。可以使用鉤子啟動(dòng)多個(gè)存儲(chǔ)，并使用" useState"從狀態(tài)訪問(wèn)值。您可以創(chuàng)建一個(gè)商店，并使用" userState()"鉤子使用商店的狀態(tài)。使用掛鉤，我們確保為組件使用所需的狀態(tài)。

這是使用PullState更改樣式屬性的示例。首先，為您的主題創(chuàng)建一個(gè)商店。

接下來(lái)，我們將讀取狀態(tài)并在單擊按鈕時(shí)切換狀態(tài)。

5. RxJS

2020年React Redux的5種替代方案

RxJS是一個(gè)反應(yīng)式擴(kuò)展JS庫(kù)(RxJS)，它使用Observables進(jìn)行異步調(diào)用。它基于事件，并與Redux結(jié)合使用。 RxJS為應(yīng)用程序提供了更好的性能和模塊化，顯示了更好的可調(diào)試調(diào)用堆棧，并具有向后兼容性。 RxJS中最常用的概念是Observable，Scheduler和Subject。

這是RxJS的自定義鉤子的簡(jiǎn)單片段，其中：