Zustandsverwaltung in Next.js I.

Einer der wichtigsten Aspekte bei der Entwicklung einer Front-End-Anwendung ist die Verwaltung des Zustands. In diesem Artikel sprechen wir über über React-Apps im Allgemeinen mit Schwerpunkt auf Next.js. Da es sich bei React um eine meinungslose Frontend-Bibliothek handelt, gibt es keine eine "richtige" Art, irgendetwas zu tun; Stattdessen liegt es am Entwickler. Diese Frage kann besonders herausfordernd sein, wenn es kommt zu Next.js.

Der Zweck dieses Beitrags besteht darin, Sie durch einige wichtige Optionen für Zustandsverwaltungslösungen in Next.js zu führen. Für die Bearbeitung dieses Artikels werden Grundkenntnisse in React vorausgesetzt.

Was ist State in React?

Was ist State Management - Über seine Bedeutung

Die Zustandsverwaltung ist einer der wichtigsten Aspekte jeder Anwendung. Der Zustand der Anwendung bestimmt, welche Benutzer sehen, wie die App aussieht, welche Daten gespeichert werden, wie der Nutzer unsere Anwendung nutzen kann, etc.

Es ist wichtig zu beachten, dass das oben erwähnte Zustandsobjekt für seine Komponente privat ist, unabhängig davon, wo es sich befindet befindet sich im Komponentenbaum. Der Zustand kann aufgrund des unidirektionalen Datenflusses nur für seine untergeordneten Elemente freigegeben werden Natur von React (Offizielle Dokumentation von React bezieht sich auf diese Weise, obwohl es möglich und natürlich ist, Kehren Sie es sowohl mit Callback als auch mit Context um). Wenn sich das Zustandsobjekt ändert, wird die Komponente ebenso neu gerendert wie ihre untergeordneten Elemente, weshalb es von Es ist besonders wichtig, die Komponenten richtig zu strukturieren und zu trennen.

Darüber hinaus unterscheiden wir zwischen dem Komponentenzustand, der privat ist, und dem Anwendungszustand, der global ist. Halten Anwendungszustand, Flux oder ein Flux-ähnliches Framework wie Redux verwendet das, was sie als "Stores" bezeichnen. Solange sie eingehängt ist, kann jede Komponente, irgendwo in der Anwendung, darauf zugreifen (ähnlich wie eine Datenbank im Frontend).

Next.js Dateistruktur

Inmitten der umarmenden Arme des Next.js Frameworks spielen die unten genannten Ordner spezifische Rollen im Leben von unsere Anwendung.

Ordner "> Seiten"

Der Ordner "pages" ist ein spezielles Verzeichnis, in dem wir unsere Routen ablegen (im Grunde genommen Eintragsdateien für Seiten). Der Router von Next.js ist Dateisystem-basiert; Keine Konfiguration erforderlich. Man kann auch dynamische Routen mit Klammern zu einem Seitennamen verwenden, z.B.: [id]. Seiten können auch unter src/pages als Alternative zum Root-Seitenverzeichnis hinzugefügt werden. Das src-Verzeichnis ist in vielen Apps sehr verbreitet und Next.js unterstützt es standardmäßig.

_app

Im Ordner "pages" kann man _app Datei erstellen, um die Standard-App zu überschreiben. Als Nächstes verwendet .js die App-Komponente zum Initialisieren Seiten. Sie können es überschreiben und die Seiteninitialisierung steuern. Das ermöglicht es Ihnen, erstaunliche Dinge zu tun, wie:

1. Beibehalten des Status beim Navigieren auf Seiten
2. Beibehalten des Layouts zwischen Seitenänderungen
3. Benutzerdefinierte Fehlerbehandlung mit componentDidCatch
4. Fügen Sie zusätzliche Daten in Seiten ein
5. Fügen Sie globales CSS hinzu

Der erste Punkt ist in unseren Augen extrem wichtig. Es ist der Ort, an dem sich unsere Anbieter befinden werden, wenn wir den Zustand auf auf der Anwendungsebene.

import App from "next/app"
import { ThemeProvider} from "@chakra-ui/core"
import Layout from "../components/layouts/Layout"
import { ModalProvider } from "../components/helpers/ModalProvider"
import theme from "../components/theme"
import from "../styles/main.css"

const MyApp = ({ Component, pageProps, auth }) => {
  return (
    <ThemeProvider theme={theme}>
      <ModalProvider>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </ModalProvider>
    </ThemeProvider>
    )
  }

export default MyApp

Dokument

Im Ordner "pages" kann man _document Datei erstellen, um dieses Standardverhalten zu überschreiben, in der man das Dokument erweitern kann Klasse. Seiten in Next.js überspringen die Definition des Markups des umgebenden Dokuments. Sie schließen <html>z. B. nie , <body>usw. In dieser Datei, da sie serverseitig gerendert wird, sodass Ereignishandler wie onClick nicht Arbeit.

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Der Artikel wird hier fortgesetzt.