Maison >interface Web >js tutoriel >Redux vs Context.Provider : choisir la gestion de l'état dans les applications React
Lors de la gestion de l'état dans une application React ou Next.js, le choix entre Redux et Context.Provider dépend de la complexité et de l'ampleur de l'état que vous gérez. Redux excelle dans la gestion d'états globaux complexes et fréquemment mis à jour avec plusieurs consommateurs, garantissant une optimisation des performances et une meilleure évolutivité. D'un autre côté, Context.Provider est plus simple et plus adapté à la gestion d'état localisée, évitant ainsi la surcharge introduite par Redux. Cet article examine les avantages et les inconvénients de chaque approche, illustré par des exemples de code, et explore comment Redux peut être optimisé pour les performances dans des scénarios du monde réel.
Redux est une puissante bibliothèque de gestion d'état qui fournit un magasin global pour conserver l'état de votre application. Il permet des mises à jour d'état prévisibles, un contrôle précis du rendu et convient bien aux grandes applications où plusieurs composants doivent accéder et modifier l'état.
Context.Provider, quant à lui, est intégré à React et est idéal pour les tâches de gestion d'état plus petites et plus simples. C'est parfait pour les cas où l'état est relativement simple et où seuls quelques composants doivent le consommer. Cependant, à mesure que l'état devient plus complexe et doit être accessible par de nombreux composants, Context.Provider peut entraîner des problèmes de performances en raison de nouveaux rendus inutiles.
Gestion d'état complexe :
Outils de débogage et de développement :
Middleware pour les effets secondaires :
Évolutivité :
État simple ou localisé :
Éviter le passe-partout :
Pas besoin de middleware :
Thème du composant ou état de configuration :
Dans certains cas, vous souhaiterez peut-être utiliser à la fois Redux et Context.Provider dans la même application. Par exemple :
Explorons deux scénarios dans une application Next.js dans lesquels Redux peut résoudre certains inconvénients de Context.Provider et un autre scénario dans lequel Context.Provider est une solution plus simple et plus appropriée.
Problème : État complexe avec des mises à jour fréquentes et des consommateurs multiples
Imaginez que vous ayez une application Next.js dans laquelle plusieurs composants sur différentes pages doivent accéder et mettre à jour un état partagé. L'état est complexe et change fréquemment (par exemple, la gestion d'un panier dans une application de commerce électronique). Avec Context.Provider, chaque mise à jour d'état pourrait déclencher des rendus inutiles dans l'ensemble de l'arborescence des composants.
Solution avec Redux : Redux vous permet de gérer efficacement cet état complexe avec un magasin centralisé, des réducteurs et des actions. Il minimise les rendus inutiles et offre de meilleures performances grâce aux sélecteurs et à la mémorisation.
// store.ts import { configureStore } from '@reduxjs/toolkit'; import cartReducer from './cartSlice'; export const store = configureStore({ reducer: { cart: cartReducer, }, });
// cartSlice.ts import { createSlice, PayloadAction } from '@reduxjs/toolkit'; interface CartState { items: { id: number; name: string; quantity: number }[]; } const initialState: CartState = { items: [] }; const cartSlice = createSlice({ name: 'cart', initialState, reducers: { addItem(state, action: PayloadAction<{ id: number; name: string }>) { const item = state.items.find(i => i.id === action.payload.id); if (item) { item.quantity += 1; } else { state.items.push({ ...action.payload, quantity: 1 }); } }, removeItem(state, action: PayloadAction<number>) { state.items = state.items.filter(i => i.id !== action.payload); }, }, }); export const { addItem, removeItem } = cartSlice.actions; export default cartSlice.reducer;
// index.tsx import { useSelector, useDispatch } from 'react-redux'; import { RootState } from '../store'; import { addItem, removeItem } from '../cartSlice'; export default function Home() { const cartItems = useSelector((state: RootState) => state.cart.items); const dispatch = useDispatch(); return ( <div> <h1>Shopping Cart</h1> <ul> {cartItems.map(item => ( <li key={item.id}> {item.name} - {item.quantity} <button onClick={() => dispatch(removeItem(item.id))}>Remove</button> </li> ))} </ul> <button onClick={() => dispatch(addItem({ id: 1, name: 'Item 1' }))}> Add Item 1 </button> </div> ); }
Pourquoi Redux est meilleur ici :
Voici la suite de l'article formaté en Markdown :
Problème : gestion simple de l'état pour le thème
Considérons un scénario dans lequel vous souhaitez gérer le thème de l'application (mode clair/sombre). L'état est simple et seuls quelques composants doivent y accéder.
Solution avec Context.Provider :
L'utilisation de Context.Provider est plus simple et plus légère dans ce cas.
// ThemeContext.tsx import { createContext, useState, useContext, ReactNode } from 'react'; interface ThemeContextProps { theme: 'light' | 'dark'; toggleTheme: () => void; } const ThemeContext = createContext<ThemeContextProps | undefined>(undefined); export const ThemeProvider = ({ children }: { children: ReactNode }) => { const [theme, setTheme] = useState<'light' | 'dark'>('light'); const toggleTheme = () => { setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light')); }; return ( <ThemeContext.Provider value={{ theme, toggleTheme }}> {children} </ThemeContext.Provider> ); }; export const useTheme = () => { const context = useContext(ThemeContext); if (!context) { throw new Error('useTheme must be used within a ThemeProvider'); } return context; };
// index.tsx import { useTheme } from '../ThemeContext'; export default function Home() { const { theme, toggleTheme } = useTheme(); return ( <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}> <h1>Current Theme: {theme}</h1> <button onClick={toggleTheme}>Toggle Theme</button> </div> ); }
// _app.tsx import { ThemeProvider } from '../ThemeContext'; export default function MyApp({ Component, pageProps }) { return ( <ThemeProvider> <Component {...pageProps} /> </ThemeProvider> ); }
Pourquoi Context.Provider est meilleur ici :
Simplicité : Le thème est un état simple et localisé, et Context.Provider fournit un moyen minimal et direct de le gérer sans la surcharge de Redux.
Moins de passe-partout : Il n'y a pas besoin d'actions, de réducteurs ou de magasin. L'état est géré directement avec les hooks React, ce qui rend la base de code plus petite et plus facile à comprendre.
Chez Transagate.ai, Redux a considérablement amélioré notre vitesse de développement. En centralisant la gestion des états, nous avons pu fournir des fonctionnalités rapidement sans compromettre les performances. La capacité d’affiner les rendus et de gérer efficacement des états complexes a libéré notre créativité, nous permettant de créer des solutions robustes et évolutives. Les mises à jour prévisibles de l'état de Redux et son vaste écosystème en ont fait un élément essentiel de notre processus de développement, nous permettant de nous concentrer sur l'innovation et l'expérience utilisateur.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!