Einer der wichtigsten Bestandteile einer App ist staatliche Verwaltung. Es bestimmt, was Benutzer sehen, wie die App aussieht, welche Daten gespeichert werden und so weiter. Daher ist es keine Überraschung, dass es so viele Open-Source-Tools gibt, die darauf ausgerichtet sind, die Staatsverwaltung einfacher und benutzerfreundlicher zu gestalten.
Von der Vielzahl von JavaScript-UI-Frameworks React ist vielleicht dasjenige, das über das dynamischste Ökosystem verfügt, einschließlich staatlicher Verwaltungsbibliotheken. Dieser Artikel behandelt zwei dieser Bibliotheken - Recoil gegen Redux - und zeigen, wie sich beide voneinander unterscheiden und welche unterschiedlichen Herangehensweisen sie bei der Anwendungsentwicklung verfolgen.
Während Redux gilt als das beliebteste Bibliothek der staatlichen Verwaltung, Recoil ist Facebooks Experiment React State Management Framework, das in letzter Zeit viel Aufmerksamkeit erregt hat. Schauen wir uns das an was Recoil vs Redux sind, ihre Leistung und ob es eine gute Idee ist, das eine dem anderen vorzuziehen.
EIN Die State Management Library bietet Ihnen eine bequeme Möglichkeit, den Status Ihrer Anwendung zu modellieren, leiten daraus berechnete Werte ab und überwachen sie auf Änderungen.
Einfach ausgedrückt, die Verwaltung Ihrer Daten in Frontend-Frameworks ist genauso wichtig wie Datenbanken. Ein staatliches Verwaltungssystem haben das Ihre Daten gut verwaltet, hilft Ihnen, eine Reihe von API-Aufrufen zu vermeiden.
Ohne staatliche Verwaltung werden Daten überall verbreitet, wie Sie im Bild unten sehen können. Sie können eigentlich keine einzige Informationsquelle für Ihre Daten haben, da diese Art von Struktur schwer zu verwalten ist und verlangsamt Ihren Entwicklungsprozess.
Wenn du eine hast staatliches Verwaltungssystem vorhanden, Daten fließen in eine Richtung, von Ihrer App zum Bundesstaat und umgekehrt. Sie kennen den tatsächlichen Standort Ihrer Daten. Diese State-Management-Technologien bieten auch eine Momentaufnahme des gesamten Datensatzes zu einem bestimmten Zeitpunkt. Auf diese Weise wissen Sie genau, wo sich Ihre Daten befinden, welche beschleunigt die Entwicklung.
Alles in allem macht eine gute Verwaltung Ihrer Daten Ihre Anwendung effizienter.
Rückstoß ist ist eine neue State-Management-Bibliothek für React. Sie ist „minimal und reactisch“, wie es auf der Website heißt, und in der Praxis sieht sie fast so aus, als würden Sie die State-Hooks für den normalen Gebrauch verwenden, aber mit ein paar netteren kleinen Details, die das Verständnis erleichtern wie die Daten durch Ihre Anwendung fließen.
Redux ist eine Open-Source-Bibliothek in der JavaScript-Welt und sehr beliebt in der Domäne von React und React Native. Es ist quasi ein obligatorisches Tool für jeden React-Entwickler, daher geht das Verständnis der Konzepte von React und Redux Hand in Hand.
Es implementiert auch Flux, die vorgeschlagene „Architektur“ zur Behandlung des Zustands einer React-Anwendung.
Redux bietet einen zentralen Speicher für Ihren Anwendungsstatus und Ihre Logik.. Es bietet Komponenten direkten Zugriff auf die Daten, die sie benötigen. Dabei handelt es sich um einen vorhersehbaren Statuscontainer, der Ihnen beim Schreiben von JavaScript-Apps hilft, die sich in Client-Server- und nativen Umgebungen konsistent verhalten.
Redux ermöglicht es Ihnen erleichtern die Erstellung komplexer Anwendungen, indem die Daten in der gesamten Anwendung konsistent sind. Wenn die Anwendung wächst, wird die Verwaltung der Daten mit dem Status der Komponente immer schwieriger.
Um Redux verwenden zu können, müssen Sie jedoch keine React-App erstellen - Sie können Redux mit jedem UI-Framework oder jeder Bibliothek verwenden für die Verwaltung des App-Status. Redux verfügt über ein großes Ökosystem an Add-Ons, die Ihren Anforderungen entsprechen.
Darüber hinaus können Sie verfolgen, wann, wo, warum und wie sich Ihr Anwendungsstatus ändert, indem Sie Redux Devtools.
Redux ist seit langem die Bibliothek der Wahl, aber mit der Einführung von Rückstoß, wir haben jetzt auch eine React-spezifische Bibliothek, die sich problemlos in die neuesten Funktionen von React integrieren lässt.
Schauen wir uns an, was, wann ist es sinnvoll, es zu verwenden? Recoil und Redux, ihre Zustandsansätze, Leistung, API-Unterschiede und sowohl die Entwickler- als auch die Benutzererfahrung.
Im Gegensatz zu Recoil verwendet Redux viele weitere Begriffe:
Aktionen - es sendet eine Nachricht an Redux und kann Daten enthalten; eine Aktion ist ein Ereignis, das definiert, was in der Anwendung passiert ist; es hat eine Art Feld in einem JavaScript-Objekt.
Reduzierungen - ein Event-Listener, der Ereignisse basierend auf der empfangenen Aktion behandelt; empfängt die aktuelle Bundesstaat und ein AktionObjekt; es kann den Status bei Bedarf aktualisieren ((Zustand, Aktion) => (NewState)).
Geschäft - Hier befindet sich der Redux-Anwendungsstatus. Für das „Design“ des Stores ist eine gewisse Planung erforderlich, um sicherzustellen, dass Aktualisierungen mit dem kleinsten Datensatz durchgeführt werden, da Aktualisierungen des Speichers Aktualisierungen in der Benutzeroberfläche auslösen.
Ein ziemlich häufiges Szenario ist das versehentliche Senden eines Updates an den Store mit einer Reihe von Werten, bei denen sich nur einer der Werte von den im Store gefundenen unterscheidet. Sie bestellen Komponenten zum erneuten Rendern für alle empfangenen Werte, aber nur ein Wert wurde wirklich aktualisiert. Nichtsdestotrotz verwenden wir Rechenressourcen, um den Komponenten mitzuteilen, dass sie aktualisiert werden sollen, was aufgrund des schlechten Designs des Speichers, der Reduzierung oder der Aktion nicht erforderlich war.
Versand - ermöglicht es Ihnen, den Status zu aktualisieren, indem Sie anrufen store.dispatch (); es löst Aktionen aus, d. h. sie lösen ein Ereignis aus.
Selektoren- extrahiert bestimmte Informationen aus einem Geschäft; es vermeidet, sich wiederholende Logik.
Schauen wir uns das folgende Beispiel an:
Nur Definitionen, um Aktionen den Operationen des Reduzierers zuzuordnen.
constants.js
Definiert, wie sich der Status der App entsprechend den empfangenen Aktionen ändert. Dieses Beispiel hat zwei Bereiche, einen für Benutzerdaten und noch eins für die Einkaufswagen. Die Aktion für eine erfolgreiche Anmeldung zeichnet die Daten des Benutzers im Status auf. Bei erfolgreicher Abmeldung löschen wir die Daten und den Warenkorb des Benutzers.
reducers.js
Definition der Aktionen, die Zustandsänderungen auslösen. Sie können eine Nutzlast erhalten, mit der sie neue Daten in den Staat eingeben können. Wir haben eine Aktion, die nach einer erfolgreichen Anmeldung aufgerufen wird, und eine weitere für die erfolgreiche Abmeldung.
actions.js
selectors.js
Hat nur ein paar Konzepte, die einfach sind:
Atom - ein Stück Staat; jedes Atom ist wie ein Mini-Store für sich und es wird schwieriger, in das vorherige Redux-Szenario zu fallen, da die Atome vollständig entkoppelt sind und darauf abzielen, Daten zu speichern, die auf einmal aktualisiert werden.
Wähler - die Basis, auf der ein Stück Staat berechnet wird.
Beispiel unten:
state.js
component.js
Slice erstellen () neben Konfiguriere Store (), das mit Aktionen und Reduzierungen einhergeht;Versand verwenden und Selector verwenden Hooks, um Aktionen auszuführen und Selektoren zu verwenden.
Atom (), das auch mit einem Selektor und integrierten Dispatchable Actions ausgestattet ist.
Redux ist gut in Durchsetzung der Best Practices von Entwicklern, das Ihnen ein einfaches Muster bietet, dem Sie folgen können, sodass Sie beim Erstellen von Funktionen nicht zu viele Implementierungsentscheidungen treffen müssen. Es ermöglicht Ihnen auch abstrahieren Sie Ihre API-Anfragen in Aktionen so dass alles an einem einzigen Ort aufbewahrt wird.
Es wurde gesagt, dass Recoil ziemlich einfach zu bedienen. Es ermöglicht Ihnen beispielsweise, asynchrone Anfragen in Selektoren zu stellen, um mit dem Status einer API-Anfrage zu beginnen.
Wenn Sie Lade- und Fehlerzustände verwalten möchten, benötigen Sie möglicherweise eine benutzerdefinierte Implementierung. Es ist eine gute Praxis, den Überblick über eine globale Wird geladen variabel im Reduzierstück.
Da Recoil in den neuesten Modus von React integriert ist, können Sie Ladezustände behandeln mit Spannung und Fehler mit einem Fehlergrenze, sodass Sie Ihre Anwendung deklarativer erstellen können.
state.js
component.js
Redux wurde gegründet als führend im globalen Staatsmanagement für eine Weile, und es wird sicherlich nicht bald irgendwohin führen. Allerdings Recoil wird zu einem ernstzunehmenden Konkurrenten um sich in React einzufügen.
Ein großer Vorteil bei der Verwendung von Recoil ist Integration mit Suspense von React, was eine einfache Methode zur Bearbeitung asynchroner Aufgaben und zur Erkennung ihres Zustands ermöglicht, sodass Sie Richten Sie schnell Ladebildschirme ein, ohne so viel Logikcode zu benötigen um zu überprüfen, ob die Anwendung Daten vom Server lädt.
Auch wenn Redux ist die beste Option für größere Projekte und die beste für eine Produktionsanwendung., das kann man mit Fug und Recht sagen Recoil ist möglicherweise die bessere Wahl, wenn es sowohl um Entwicklererfahrung als auch um Benutzererfahrung geht. Recoil befindet sich noch im Versuchsstadium, kann jedoch Leistungsvorteile bieten, wenn Ihre App komplex genug ist.
Jedes Jahr lesen mehr als 500.000 Menschen unseren Blog und bei Themen wie React, Recoil und Redux stehen wir an der Spitze von Google. Wenn dir dieser Blogbeitrag gefallen hat und du gerne alle unsere Blogbeiträge lesen würdest, schau mal hier.
Lesen Sie auch:
Vielseitiger und datengesteuerter Wachstumsvermarkter mit fundierten Geschäftskenntnissen, der über die neuesten Entwicklungen in der digitalen Marketinglandschaft auf dem Laufenden gehalten wird.
Your everyday web developer who likes to hide in the backend. Javascript and Ruby are my jam. I still fumble with Docker and my builds break quite often.
Full-Stack-Entwickler und JavaScript-Liebhaber. Erstklassiges Frontend ist mein Ding, wo ich gerne neue Sachen experimentiere. Kajakfischer, Brauer und Biertrinker!
People who read this post, also found these interesting:
.webp)
.webp)
%20(2).webp)
