State kezelés Next.js-el I.

A frontend alkalmazás fejlesztésének egyik legsarkalatosabb pontja a state kezelés. Ebben a cikkben fogunk beszélni a React alkalmazásokról általában, kiemelt tekintettel a Next.js-re. Mivel a React egy felsőbb véleményt nélkülülöző frontend könyvtár, így nincsen egy "igaz" vagy "helyes" módja semminek sem (amelynek megvan a maga jó és rossz oldala egyaránt). Ehelyett minden a fejlesztőn múlik. A Next.js esetében a state kezelése kifejezetten complex kérdéskör.

Ezen cikk célja, hogy eligazítsunk a Next.js state kezelési lehetőségei között. Egy alapvető React ismeret a cikk feldolgozásához feltételezett.

Mi is a state a React esetében?

Mi a state kezelés - a fontosságáról általánosan

A state kezelés minden frontend app egyik legfontosabb aspektusa. Az alkalmazás state-je határozza meg, hogy a
felhasználók mit is láthatnak, hogyan is néz ki az alkalmazás, milyen adatok kerülnek tárolásra, hogyan
használhatja a felhasználó az alkalmazásunkat stb.

Fontos megjegyzés. Az előbb említett state object privát egy React komponens számára, nem számít, hogy az hol él a komponens fában. Az egyirányú adatáramlás miatt a state csak a komponens gyerekeivel osztható meg, a React természete miatt (a React hivatalos dokumentációja hivatkozik erre így, pedig callback-kel és context-tel is egyaránt lehetséges és természetes ezt megfordítani). Amikor a state object megváltozik, a komponens és annak gyermekei is újrarenderelődnek, ezért különös fontosságú az összetevők megfelelő kompozíciója, struktúrálása és elkülönítése.

Ezenkívül megkülönböztetünk komponensállapotot (component state), amely privát, és alkalmazásállapotot (app state), amely globális. Az alkalmazás state-jét a Flux vagy egy Flux-szerű state kezelő keretrendszer, mint például a Redux, az általuk "store"-nak nevezett dolog tarja magában. Amíg a komponensek be vannak a store-ba kötve, addig az alkalmazásban azok bárhol elérhetik (a store úgy viselkedik, mint egy adatbázis a frontenden).

Next.js fájl struktúra

A Next.js keretrendszer ölelő karjai között az alább említett mappák kiemelt szerepet töltenek be a alkalmazásunk életében.

pages mappa

Az "pages" mappa egy speciális könyvtár, ahová a route-okat (alapvetően az oldalak belépési fájljait) helyezzük el. A Next.js router-e fájlrendszer alapú, minden további konfiguráció nélkül. Dinamikus route-okat is használhatunk zárójelek használatával az oldal nevében, például: [id] vagy [slug]. A "pages" az "src/pages" alatt is hozzáadható könyvtár a gyökéroldalak könyvtárának alternatívájaként. Az src könyvtár nagyon gyakori számos alkalmazásban, és a Next.js alapértelmezés szerint támogatja ezt a felépítést is.

_app fájl

Az "pages" mappában létrehozhatunk _app fájlt az alapértelmezett alkalmazás felülbírálásának érdekében. A Next.js az _app összetevőket használja az oldalak inicializáláshoz. Felülbírálhatja és szabályozhatja az oldal inicializálását. Ez lehetővé teszi, hogy olyan dolgokat csináljunk, mint például:

1. State megtartása oldalak navigálásakor
2. Állandó layout az oldalváltások között
3. Egyéni hibakezelés a componentDidCatch segítségével
4. Szúrjon be további adatokat az oldalakba
5. Globális CSS hozzáadása miden oldalhoz

Jelenleg számunkra az első pont a legérdekesebb. Ez az a hely, ahol provider-eink laknak, ha a state-et szeretnénk kezelni app szinten.

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

_document fájl

Az "pages" mappában létrehozhat egy _document fájlt az alapértelmezett viselkedés felülírásához, ahol kiterjeszthetjük a Document osztályt. A Next.js oldalai így kihagyják a környező dokumentum markupját. Így sosem nem tartalmazzák a <html>-, <body>-tagokat stb. Ebben a fájlban, mert a szerver oldalon van előállítva, így az eseménykezelők (eventListener-s), mint például az onClick, nem fognak működni.

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

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

A cikk itt folytatódik.