Zustandsverwaltung in Next.js II.

Was ist Prop Drilling, wissen Sie, was Sie vermeiden sollten

Prop Drilling bezieht sich auf die inoffizielle Praxis, Daten an eine tief verschachtelte Komponente zu liefern, indem sie durch eine Anzahl der verschachtelten untergeordneten Komponenten über Requisiten. Diese Methode hat den Nachteil, dass nur wenige der Komponenten, durch die Die gelieferten Daten benötigen tatsächlich die Daten. Sie dienen lediglich als Kanäle, um diese Informationen an die endgültige Bestimmungsort.

Der Begriff "Bohren" bezieht sich auf diesen Prozess, bei dem diese Komponenten gezwungen werden, nicht verwandte Daten aufzunehmen und an die folgenden Komponente, die sie wiederum an die nächste Komponente weiterleitet, und so weiter, bis sie ihr Ziel erreicht. Das Die Wiederverwendbarkeit des Bauteils kann durch diesen Rechtsakt stark beeinträchtigt werden.

Mögliche Lösungen

Jetzt, da klar ist, was wir erreichen wollen und mit welchen Problemen wir konfrontiert sind, müssen wir das Mögliche untersuchen Lösungen. Im Folgenden finden Sie eine unvollständige Liste von Alternativen zur Propellerbohrtechnik.

• React Context API, useState, useReducer (integrierte Lösungen) -Redux
• React-Abfrage
• Zustand
• Jotai
• Mobx

Auch wenn wir große Fans von Redux sind, empfehlen wir, die integrierten Lösungen bei der Zustandsverwaltung und Interaktivität zu verwenden werden benötigt, wenn unsere Anwendung eher klein oder einfach ist.

Wenn die Anwendung jedoch komplexere State-Management-Lösungen erfordert, empfehlen wir Ihnen, Redux zu verwenden.

Unser Artikel soll Redux nicht im Detail vorstellen, aber wir induzieren die Integration mit Next.js.

React-Kontext-API im Vergleich zu Redux

• Kontext-API

1. Integriertes Tool, das React enthält (erhöht nicht die Paketgröße)
2. Erfordert minimale Einrichtung
3. Speziell für statische, nicht aktualisierte oder häufig aktualisierte
4. Neue Kontexte Der Anbieter muss jedes Mal von Grund auf neu erstellt werden
5. Die Logik der Benutzeroberfläche und die Logik für die Zustandsverwaltung befinden sich in derselben Komponente
6. Das Debuggen kann bei einer eingebetteten Struktur schwierig sein, auch mit Hilfe des Dev Tools

-Redux

1. Es müssen zusätzliche Pakete installiert werden, was die Größe des endgültigen Pakets erhöht
2. Die Integration mit React erfordert eine zusätzliche Einrichtung
3. Funktioniert sowohl mit statischen als auch mit dynamischen Daten wie ein Zauber
4. Leicht erweiterbar durch einfaches Hinzufügen neuer Vorgänge nach der Ersteinrichtung
5. Bessere Codeorganisation mit separater Benutzeroberflächenlogik und Zustandsverwaltungslogik
6. Unglaublich leistungsstarke Redux Dev Tools für das Debugging

Eingebaute Lösungskontext-API. useState, useReducer

Es ist wichtig zu beachten, dass die Verwendung von Anbietern Aufmerksamkeit erfordert.

1. Sie können die sogenannte "Provider-Hölle" schaffen, die der "Callback-Hölle" verblüffend ähnlich ist. Hier ist ein toller article Wie man die Anbieterhölle vermeidet Ein freundlicher Ratschlag von einem anderen Entwickler: Seien Sie sich immer der potenziellen Fallstricke beim Organisieren und Verschachteln bewusst Ihre Anbieter.
2. Viele Entwickler sind verwirrt über Contexts und Redux, Contexts ist kein Ersatz für Redux. Sie haben einige Ähnlichkeiten und Überschneidungen, aber es gibt große Unterschiede in ihren Fähigkeiten. Es handelt sich um verschiedene Werkzeuge, die dies tun unterschiedliche Dinge, und Sie verwenden sie für unterschiedliche Zwecke. Es ist lediglich ein Transportmittel; Es wird nicht " managen" irgendetwas. Sie und Ihr eigener Code übernehmen die gesamte "Zustandsverwaltung", in der Regel mithilfe von useState/useReducer.

   // ... imports
   
   const App = () => {
     // ... some code
     return (
       <>
        <ReduxProvider value={store}>
         <ThemeProvider value={theme}>
          <OtherProvider value={otherValue}>
           <OtherOtherProvider value={otherOtherValue}>
            {/** ... other providers*/}
                                   <HellProvider value={hell}>
                                     <HelloWorld />
                                   </HellProvider>
            {/** ... other providers*/}
           </OtherOtherProvider>
          </OtherProvider>
         </ThemeProvider>
        </ReduxProvider>
       </>
     )
   }
   

3. Beispiel eines Anbieters - Obwohl useReducer im folgenden Beispiel nicht verwendet wird, ist es eine Möglichkeit für Zustände die komplexer sind.

   import {createContext, ReactNode, useContext, useState,} from "react"
   
   type ThemeProviderProps = {
      children: ReactNode
   }
   
   type ThemeContext = {
     isPrimary: boolean
   }
   
   type ThemeDispatchContext = {
      changeTheme: () => void
   }
   
   const ThemeContext = createContext({} as ThemeContext)
   const ThemeDispatchContext = createContext({} as ThemeDispatchContext)
   
   export function useTheme() {
     return useContext(ThemeContext)
   }
   
   export function useDispatchTheme() {
    return useContext(ThemeDispatchContext)
   }
   
   const ThemeProvider = ({children}: ThemeProviderProps) => {
   const [isPrimary, setIsPrimary] = useState<boolean>(true)
   
       const changeTheme = () => {
           setIsPrimary(prevState => !prevState)
       }
   
       return (
           <ThemeDispatchContext.Provider value={{changeTheme}}>
               <ThemeContext.Provider value={{isPrimary}}>
                   <div
                       className={
                           isPrimary 
                              ? "themeable-primary-theme" 
                              : "themeable-secondary-theme"
                           }
                        >
                       {children}
                   </div>
               </ThemeContext.Provider>
           </ThemeDispatchContext.Provider>
       )
   }
   
   export {ThemeProvider}

Der Artikel geht weiter hier.