Redux et Hooks React ne doivent pas être considérés comme l'opposé de l'un de l'autre. Ce sont des choses différentes, avec des objectifs distincts.
Quand Hooks React est né, plusieurs développeurs semblaient perplexes face aux concepts introduits et à la manière dont ils seront interpolés dans le Redux library. Le Utilisez Reducer Hook a accru cette confusion.
Dans cet article, je vais vous expliquer comment Redux et le nouveau Hook React Utilisez Reducer sont différents et comment ils peuvent être utilisés.
Redux a été créé pour gérer l'état de l'application. Il fournit plusieurs outils pour simplifier la gestion de l'état global de l'application.
Les nouveaux ajouts au Réagir library, Use the context et Utilisez Reducer, est également venu gérer l'état d'un Réagir candidature. Cependant, il présente une subtile différence avec Redux, que je vais clarifier plus loin.
Mais tout d'abord, permettez-moi de vous présenter Hooks React.
React Hooks est la nouvelle méthode de gestion de l'état et du cycle de vie des composants React, sans compter sur les classes de composants. Il a été introduit dans la version 16.8 de la bibliothèque et a pour but de réduire la complexité des composants en partageant la logique entre eux.
Hooks React fournit un moyen facile de les manipuler composant behavior and partagez composant logique.
Le Hooks React cette fonctionnalité n'a pas l'intention de remplacer les connaissances antérieures de Réagir des concepts tels que cycle de vie, état, accessoires, contexte, et réfs.
Avec Hooks React, nous pouvons écrire nos hooks personnalisés pour extraire la logique qui sera utilisée dans plusieurs composants et implémenter le D.R.Y (Ne vous répétez pas) motif.
Dans l'extrait ci-dessous, vous pouvez voir un exemple de hooks personnalisés écrits pour l'un de nos projets :
undefined
D'accord, maintenant que nous savons Hooks React, jetons un coup d'œil à Redux.
Redux est une bibliothèque permettant de gérer l'état global de l'application. Dans cette bibliothèque, nous pouvons trouver plusieurs outils qui nous aident, les développeurs, à être en contact avec l'état de l'application et à le transformer en donnant à l'utilisateur la possibilité d'émettre actions.
Redux, comme le dit la documentation, peut être décrit selon trois principes fondamentaux :
Redux same mis à jour la bibliothèque avec ses crochets personnalisés. Ils peuvent être utilisés pour intégrer les composants qui utilisent Hooks React fonctionnalités permettant d'accéder aux données du magasin et à des actions d'expédition sans avoir recours aux classes de composants.
Maintenant que nous sommes un peu plus familiarisés avec Redux et Hooks React voyons la différence entre les deux.
Les deux gèrent la gestion de l'État, mais à quelques différences près. Il y a beaucoup d'abstraction dans la phrase suivante, mais cela semble être une règle d'or pour savoir quand utiliser Redux dans votre application :
Redux doit être utilisé dans des applications dotées de plusieurs fonctionnalités. Grâce à ces fonctionnalités, vous partagez des parties des mêmes informations.
Lors de l'utilisation du Use the context et Utilisez Reducer, le Redux les fonctionnalités peuvent être reproduites. Redux propose des outils gratuits qui nous aident à gérer l'application sans réinventer la roue. Il nous offre également les avantages suivants :
Sens un peu plus sur la réalité Réagir addictions, Hooks React, pour gérer l'état global et son utilisation idéale.
Le Use the context le crochet vient accéder au état qui est partagé par fournisseurs. Le meilleur scénario pour utiliser le Hooks React Use the context se trouve dans une petite application ou permet de partager de petites informations entre les composants, comme le thème de l'application. Le Use the context a deux concepts principaux, qui sont énumérés ci-dessous.
undefined
This provider create the undefined objet qui sera utilisé dans toutes les applications et une fonction pour le mettre à jour, le undefined. Dans l'extrait ci-dessous, vous pouvez consulter les undefined en action.
undefined
undefined
Dans l'extrait ci-dessus, nous pouvons vérifier l'utilisation de l'objet global undefined pour définir la couleur de fond de notre application.
Après avoir appris à connaître Use the context fonction, il y en a une autre qui embrouille les développeurs. Le Utilisez Reducer crochets. Dans la section ci-dessous, je vais parcourir cette fonctionnalité et expliquer son cas d'utilisation.
Le Utilisez Reducer hook doit être utilisé dans les composants qui reposent sur une logique complexe. Cela apparaît comme la principale confusion avec le Redux bibliothèque, car les développeurs ont tendance à penser que Utilisez Reducer pourrait remplacer la bibliothèque du directeur de l'État. Mais en fait, son utilisation devrait être limitée aux composants. Cela s'explique principalement par le fait que l'utilisation mondiale de Utilisez Reducer exige la réécriture du nouveau code pour des fonctionnalités telles que le contrôle de la mise à jour des composants.
Maintenant que nous comprenons le cas d'utilisation du Utilisez Reducer Hook est le moment de montrer de l'action. Dans l'exemple ci-dessous, nous utilisons le nouveau Hook React toxicomanie Utilisez Reducer pour contrôler un composant avec différents états.
Jetons un coup d'œil en profondeur à la Utilisez Reducer paramètres d'entrée et de sortie.
La déclaration du Utilisez Reducer hook ressemblera très probablement à ceci :undefined
Où l'on peut identifier que Utilisez Reducer hook reçoit deux paramètres, comme indiqué ci-dessous :
undefined
undefined
Le premier paramètre de sortie du hook est l'état réel du composant. Cet état doit être utilisé dans notre application pour représenter les données.
undefined
Il suit également la même règle de la Réagir state, c'est-à-dire :
N'écrivez jamais directement dans l'état et l'état doit être mis à jour en émettant actions.
Le actions ce sera expédié by our components doit toujours être représenté comme un seul objet avec le undefined et undefined clé. Où undefined est l'identifiant du expédié action et undefined is the information according which this action s'ajoutera à l'État.
undefined
En plus de toutes ces pièces, nous pouvons voir le résultat final dans l'application ci-dessous :
Redux et Hooks React doivent être considérés comme des compléments et aussi comme des éléments différents. Alors qu'avec le nouveau Hooks React des ajouts, Use the context et Utilisez Reducer, vous pouvez gérer l'état global, dans des projets de plus grande complexité sur lesquels vous pouvez compter Redux pour vous aider à gérer les données de l'application.
Si vous pensez à création d'une application, les deux peuvent être utilisés. Alors que Redux contient l'état global et les actions qui peuvent être envoyées, le Hooks React fonctionnalités permettant de gérer l'état du composant local.
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.
Développeur Javascript depuis 2016, j'ai créé des applications mobiles en utilisant Ionic et React Native. Guitariste et passionné de cuisine.
People who read this post, also found these interesting:
.webp)
