Redux und React-Hooks sollten nicht als das Gegenteil voneinander gesehen werden. Es sind verschiedene Dinge mit unterschiedlichen Zielen.
Wann React-Hooks geboren wurde, schienen mehrere Entwickler verwirrt über die eingeführten Konzepte und deren Interpolation in die Redux Bibliothek. Die Verwenden Sie Reducer Hook hat diese Verwirrung noch verstärkt.
In diesem Artikel werde ich erklären, wie Redux und das neue Reagiere Hook Verwenden Sie Reducer sind unterschiedlich und wie können sie verwendet werden.
Redux wurde erstellt, um den Status in der gesamten Anwendung zu verwalten. Es bietet mehrere Tools, um die Komplexität der Verwaltung des globalen Anwendungsstatus zu verringern.
Die Neuzugänge zum Reagieren Bibliothek, Kontext verwenden und Verwenden Sie Reducer, kam auch, um den Staat zu verwalten Reagieren Bewerbung. Es hat jedoch einen subtilen Unterschied zu Redux, was ich weiter unten näher erläutern werde.
Aber zuerst möchte ich Ihnen vorstellen React-Hooks.
React Hooks ist die neue Art, den Status und den Lebenszyklus von React-Komponenten zu handhaben., ohne sich auf Komponentenklassen zu verlassen. Es wurde in der Version 16.8 der Bibliothek eingeführt und hat die Absicht, die Komplexität der Komponenten zu verringern, indem die Logik zwischen ihnen gemeinsam genutzt wird.
React-Hooks bietet eine einfache Handhabung der Komponente Verhalten und teile das Komponente Logik.
Das React-Hooks Die Funktion hat nicht die Absicht, die bisherigen Kenntnisse von zu ersetzen Reagieren Konzepte wie Lebenszyklus, Bundesstaat, Requisiten, Kontext, und Refs.
Mit React-Hooks, wir können unsere benutzerdefinierten Hooks schreiben, um Logik zu extrahieren, die in mehr als einer Komponente verwendet wird, und die implementieren D.R.Y (Wiederhole dich nicht) Muster.
Im folgenden Ausschnitt sehen Sie ein Beispiel für benutzerdefinierte Hooks, die für eines unserer Projekte geschrieben wurden:
undefined
Okay, jetzt wo wir es wissen React-Hooks, schauen wir uns das an Redux.
Redux ist eine Bibliothek zur Verwaltung des globalen Anwendungsstatus. In dieser Bibliothek finden wir verschiedene Tools, die uns Entwicklern helfen, mit dem Status der Anwendung Schritt zu halten und sie auch zu transformieren, indem sie dem Benutzer die Möglichkeit geben, etwas auszugeben Aktionen.
Redux, wie es in der Dokumentation heißt, kann in drei Grundprinzipien beschrieben werden:
Redux sogar aktualisiert die Bibliothek mit seinem benutzerdefinierte Haken. Diese können verwendet werden, um die Komponenten zu integrieren, die das verwenden React-Hooks Funktionen für den Zugriff auf Daten aus den Speicher- und Versandaktionen, ohne sich auf die Komponentenklassen verlassen zu müssen.
Jetzt, wo wir etwas vertrauter sind Redux und React-Hooks lassen Sie uns den Unterschied zwischen ihnen sehen.
Beide kümmern sich um die Staatsverwaltung, jedoch mit mehreren Unterschieden. Der folgende Satz enthält viel Abstraktion, aber das scheint eine goldene Regel zu sein, um zu wissen, wann Sie ihn verwenden sollten Redux in deine Bewerbung:
Redux sollte in Anwendungen verwendet werden, die über mehrere Funktionen verfügen. Mit diesen Funktionen können Teile derselben Informationen gemeinsam genutzt werden.
Während der Verwendung des Kontext verwenden und Verwenden Sie Reducer, das Redux Funktionalitäten können reproduziert werden. Redux bietet einige kostenlose Tools, die uns helfen, die Anwendung zu verwalten, ohne das Rad neu zu erfinden. Es bietet uns auch Folgendes:
Lassen Sie uns ein bisschen mehr über das eigentliche verstehen Reagieren Süchte, React-Hooks, um den globalen Staat und seine ideale Nutzung zu verwalten.
Das Kontext verwenden Hook kommt, um auf das zuzugreifen Bundesstaat das wird geteilt von Anbieter. Das beste Szenario, um das zu verwenden React-Hooks Kontext verwenden ist in einer kleinen Anwendung oder um kleine Informationen zwischen den Komponenten auszutauschen, z. B. das Thema der Anwendung. Das Kontext verwenden hat zwei Hauptkonzepte, die unten aufgeführt sind.
undefined
Dieser Anbieter erstellt die undefined Objekt, das in allen Anwendungen verwendet wird, und eine Funktion, um es zu aktualisieren, das undefined. Im folgenden Ausschnitt können Sie überprüfen undefined in Aktion.
undefined
undefined
Im obigen Ausschnitt können wir die Verwendung des globalen Objekts überprüfen undefined um die Hintergrundfarbe unserer Anwendung festzulegen.
Nach dem Kennenlernen der Kontext verwenden Funktion, es gibt noch eine, die die Entwickler verwirrt. Die Verwenden Sie Reducer Haken. Im folgenden Abschnitt werde ich diese Funktion durchgehen und ihren Anwendungsfall erläutern.
Das Verwenden Sie Reducer Hook sollte in Komponenten verwendet werden, die eine komplexe Logik dahinter haben. Es zeigt sich als die Hauptverwirrung mit dem Redux Bibliothek, weil Entwickler dazu neigen, das zu denken Verwenden Sie Reducer könnte die State Manager-Bibliothek ersetzen. Tatsächlich sollte seine Verwendung jedoch beschränkt werden auf Komponenten. Dies liegt hauptsächlich an der weltweiten Verwendung von Verwenden Sie Reducer erfordert das Umschreiben von neuem Code, um Funktionen wie die Steuerung von Komponenten-Updates durchzuführen.
Jetzt, wo wir den Anwendungsfall für den Verwenden Sie Reducer Hook ist Zeit, etwas Action zu zeigen. Im folgenden Beispiel verwenden wir das neue Reagiere Hook Sucht Verwenden Sie Reducer um eine Komponente mit unterschiedlichen Zuständen zu steuern.
Werfen wir einen tiefen Blick auf die Verwenden Sie Reducer Eingabe- und Ausgabeparameter.
Die Erklärung der Verwenden Sie Reducer Hook wird höchstwahrscheinlich so aussehen:undefined
Wo können wir feststellen, dass Verwenden Sie Reducer Hook erhält zwei Parameter, wie unten gezeigt:
undefined
undefined
Der erste Ausgabeparameter des Hooks ist der tatsächliche Zustand der Komponente. Dieser Status sollte in unserer Anwendung zur Darstellung der Daten verwendet werden.
undefined
Es folgt auch der gleichen Regel der Reagieren Staat, das heißt:
Schreiben Sie niemals direkt in den Staat und der Status sollte durch Ausgeben aktualisiert werden Aktionen.
Das Aktionen das wird versandt von unseren Komponenten sollte immer als ein Objekt dargestellt werden mit undefined und undefined Schlüssel. Wo undefined steht als Bezeichner des versandt Aktion und die undefined ist die Information, dass dies Aktion wird zum Staat beitragen.
undefined
Wenn wir all diese Teile zusammenfügen, können wir das Endergebnis in der folgenden Anwendung sehen:
Redux und React-Hooks sollte als Ergänzung und auch als verschiedene Dinge gesehen werden. Während mit dem Neuen React-Hooks Ergänzungen, Kontext verwenden und Verwenden Sie Reducer, können Sie den globalen Staat managen, bei Projekten mit größerer Komplexität können Sie sich darauf verlassen Redux um Ihnen bei der Verwaltung der Bewerbungsdaten zu helfen.
Wenn du darüber nachdenkst eine Anwendung erstellen, beide können verwendet werden. Während Redux enthält den globalen Status und die Aktionen, die ausgelöst werden können, die React-Hooks Funktionen zur Behandlung des lokalen Komponentenstatus.
Most comparisons shrug and say "it depends". Here is what we actually use when we audit or start a React codebase. Two axes: application complexity, meaning how many features share the same data, and team size, meaning how many engineers change that data.
The same four rules, in prose, because images travel badly:
And here is the bit that surprises people. Team size, not application complexity, is the stronger predictor. A genuinely complex app maintained by two engineers who share a mental model runs beautifully on hooks. A merely fiddly app maintained by nine engineers across three squads does not, and not because the code cannot express it. Because nine people cannot hold an undocumented convention in their heads at the same time.
Picture a product growing from two engineers to ten across a couple of quarters.
At two, hooks-only is optimal. Shared state sits in three contexts, the conventions are unwritten because both engineers wrote them, and shipping is quick. Redux would be dead weight.
At ten, that same architecture flips on you. Onboarding stretches from days into weeks, because there is no canonical answer to "where does this data live", only precedent.
Two engineers solve the same re-render problem independently, in incompatible ways.
Debugging a production incident means reconstructing state by reading code, because there is no action log. Velocity drops, and no single decision caused it.
So the trade-off is not boilerplate versus elegance. It is cost paid upfront versus cost paid at scale, with interest.
The failure runs both ways, mind. Adopting Redux for a two-engineer MVP is a real cost with no return. The signal to watch is not lines of code. It is the day your team stops being able to answer "why did this re-render" without opening a debugger.
The reverse migration is increasingly common, usually when the Redux store turns out to be mostly cached server data wearing a disguise.
useReducer, or one Zustand store.
Teams regularly find step 2 settles the whole argument on its own. The problem was never Redux. It was using a client state manager as a network cache.
Want the wider picture? Our guide to React state management covers the full landscape, and our pieces on selecting a tech stack and asynchronous JavaScript patterns cover the ground either side of it.
Redux is an open-source library for managing global application state in JavaScript apps, most often React ones. It keeps shared state in a single object called the store, and changes it only through dispatched actions handled by pure functions called reducers. The name gives the game away: state changes are reduced into one predictable flow.
Use hooks for local component state and small shared values like theme or locale. Reach for Redux when several features depend on the same data, when more than five engineers work on the codebase, or when you need an audit trail of state changes. In most production applications, the answer is both, at different layers.
Start with hooks. Move to Zustand when shared state outgrows context and you begin fighting re-renders. Move to Redux Toolkit when the team passes roughly five engineers, or the domain demands traceable state changes. Zustand now leads the category on developer satisfaction, while Redux remains the most widely deployed.
Yes. Just not as the automatic default. The State of React 2025 survey finds Redux and Redux Toolkit are still the most widespread solutions, and they remain the strongest option for large teams and regulated domains. For a new project with a small team, Zustand, or no library at all, is now the more common starting point.
Use useReducer when complex state is penned inside one component or a tight cluster: a multi-step form, a wizard, a data grid. Use Redux when that state is shared across unrelated parts of the application. Scope, not complexity, draws the line.
For small and mid-sized applications, yes. useContext and useReducer together reproduce most of what Redux does. What they cannot replace without serious custom work is selector-based re-render control, middleware for async logic, and the DevTools debugging experience. Which is exactly what large teams lean on.
Redux is framework-agnostic, a state container that works with any UI layer. react-redux is the official binding that wires it into React, giving you the useSelector and useDispatch hooks. You need both to use Redux in a React application.
It can. Context has no selector mechanism, so when a provider's value changes, every consumer beneath it re-renders, including the ones that never used the changed part. Fine for values that rarely move. Painful for anything that changes often or is consumed widely.
So is Redux finished? No, of course not. React hooks and Redux are complements, not rivals. Hooks handle component state and shareable logic, Redux handles global state, dispatched actions and the observability that large teams live on, and Zustand now sits comfortably between them.
Back to the building one last time. You do not choose between the tap and the mains. You work out how many rooms need water, how many people are turning the taps, and you plumb accordingly.
Where does your application sit on the complexity axis, where does your team sit on the size axis, and where will both of them sit in twelve months? Architect for that. Not for today.
If you are building or scaling a React application and want a straight answer on your state architecture before it sets hard, our team runs technical audits that do exactly that.
Ich bin seit 2016 Javascript-Entwickler und habe mobile Apps mit Ionic und React Native erstellt. Gitarrist und Kochliebhaber.
People who read this post, also found these interesting:
.webp)
