Zarządzanie stanem leży u podstaw nowoczesnych aplikacji internetowych, odgrywając istotną rolę w zarządzaniu danymi użytkowników i przechwytywaniu ich interakcji. Niezależnie od tego, czy chodzi o zapełnianie koszyka na platformie e-commerce, czy utrzymywanie sesji zalogowanego użytkownika po uwierzytelnieniu, działania te są możliwe dzięki efektywnemu zarządzaniu stanem.

Zasadniczo menedżerowie stanu umożliwiają aplikacjom dostęp do danych i ich przetwarzanie w celu uzyskania pożądanych wyników. Next.js zapewnia obsługę wielu rozwiązań do zarządzania stanem. Jednak w tym przewodniku skupimy się na wykorzystaniu zestawu narzędzi Redux do zarządzania stanem.

W aplikacjach Next.js zarządzanie stanem zwykle obejmuje dwa rodzaje stanów: stan globalny i stan komponentu. Stan globalny zawiera informacje wspólne dla wszystkich komponentów w aplikacji, takie jak status uwierzytelnienia użytkownika, podczas gdy stan komponentu przechowuje dane specyficzne dla poszczególnych komponentów.

Zarówno stany globalne, jak i stany komponentów odgrywają istotną rolę w zarządzaniu ogólnym stanem aplikacji, ułatwiając efektywną obsługę danych.

Reduxis jest szeroko stosowany jako rozwiązanie do zarządzania stanem w całym kraju różne frameworki JavaScript. Może jednak wprowadzać złożoność, szczególnie w przypadku mniejszych projektów.

Powszechną wadą jest konieczność pisania powtarzalnego kodu szablonowego w celu zdefiniowania typów akcji, kreatorów akcji i reduktorów. Może to prowadzić do zwiększonej nadmiarowości kodu.

Aby sprostać tym wyzwaniom, Zestaw narzędzi Redux (RTK) przychodzi na ratunek. Ma to głównie na celu usprawnienie środowiska programistycznego podczas pracy z Biblioteka zarządzania stanem Redux. Zapewnia zestaw narzędzi i narzędzi, które upraszczają typowe zadania Redux, eliminując potrzebę stosowania nadmiernego kodu szablonowego.

Teraz przejdźmy do używania narzędzia Redux Toolkit do zarządzania stanem w aplikacjach Next.js. Aby rozpocząć, utwórz projekt Next.js i zainstaluj wymagane zależności, wykonując poniższe czynności.

1. Utwórz lokalnie nowy projekt Next.js, uruchamiając poniższe polecenie w swoim terminalu:

   npx create-next-app@latest next-redux-toolkit

2. Po utworzeniu projektu przejdź do katalogu projektu, uruchamiając:

   CD next-redux-toolkit

3. Na koniec zainstaluj niezbędne zależności w swoim projekcie za pomocą npm, menedżer pakietów Node.

   npm zainstaluj @reduxjs/toolkit reaguj-redux

Po skonfigurowaniu podstawowego projektu Next.js możesz teraz zbudować demonstracyjną aplikację Next.js, która wykorzystuje zestaw narzędzi Redux do zarządzania stanem.

Możesz znaleźć kod tego projektu w this Repozytorium GitHub.

Skonfiguruj sklep Redux

Magazyn Redux to centralny kontener przechowujący cały stan aplikacji. Służy jako pojedyncze źródło danych aplikacji, dostarczając stany do każdego komponentu. Sklep odpowiada za zarządzanie i aktualizowanie stanu poprzez akcje i reduktory – ułatwiając zarządzanie stanem w całej aplikacji.

Aby zbudować sklep Redux, utwórz nowy redux folder w katalogu głównym projektu Next.js. Wewnątrz tego folderu utwórz nowy sklep.js plik i dodaj następujący kod:

import {konfigurujSklep} z'@reduxjs/zestaw narzędzi';
import profilReduktor z„./reducers/profileSlice”;
eksportdomyślny skonfigurujSklep({
 reduktor:{
 profil: profileReducer
 }
})

Powyższy kod wykorzystuje KonfigurujSklep funkcja tworzenia i konfigurowania sklepu Redux. Konfiguracja sklepu obejmuje określenie reduktorów za pomocą reduktor obiekt.

Reduktory w tym przypadku określają, jak stan aplikacji powinien się zmieniać w odpowiedzi na określone akcje lub określone zdarzenia. W tym przykładzie profil reduktor odpowiada za zarządzanie akcjami związanymi ze stanem profilu.

Konfigurując sklep Redux, kod ustanawia podstawową strukturę zarządzania stanem aplikacji za pomocą zestawu narzędzi Redux.

Zdefiniuj plasterki stanu

Wycinki stanu redux to komponenty, które hermetyzują logikę zarządzania stanem określonych elementów danych w skonfigurowanym magazynie redux. Te plasterki są tworzone przy użyciu utwórz plasterek funkcja, która automatycznie generuje reduktor, twórców akcji i typy akcji dla wycinka.

w redux katalogu, utwórz nowy folder i nadaj mu nazwę reduktory. Wewnątrz tego folderu utwórz profileSlice.js plik i dodaj następujący kod.

import {createSlice} z'@reduxjs/zestaw narzędzi';
konst wycinek profilu = utwórz wycinek ({
 nazwa: 'profil',
 stan początkowy: {
 nazwa: 'nic'
 },
 reduktory: {
 SET_NAME: (stan, czynność) => {
 stan.nazwa = akcja.ładunek
 }
}})
eksportkonst {SET_NAME} = profileSlice.actions;
eksportdomyślny profileSlice.reduktor;

W dostarczonym kodzie plik utwórz plasterek Funkcja tworzy wycinek stanu dla stanu profilu użytkownika. The profilSlice obiekt zawiera nazwę plasterka i jego stan początkowy, który zawiera wartości domyślne dla właściwości stanu.

Ponadto obiekt plasterka przyjmuje również a reduktory właściwość, która definiuje procedury obsługi akcji dla tego wycinka. W tym przypadku pojedyncza funkcja reduktora o nazwie SET_NAME. Zasadniczo po wywołaniu tej funkcji zaktualizuje ona właściwość name stanu o podane dane.

The utwórz plasterek Funkcja automatycznie generuje kreatory akcji i typy akcji na podstawie zdefiniowanych reduktorów. Eksportowane SET_NAME twórca akcji i profilSlice.reduktor reprezentuje kreatora wygenerowanej akcji i funkcję reduktora dla wycinka profilu.

Tworząc ten wycinek stanu, komponenty w aplikacji mogą wykorzystywać SET_NAME akcję i przekaż żądany ładunek, aby zaktualizować nazwę profilu w stanie.

Utwórz komponent do testowania funkcjonalności zarządzania stanem RTK

Otworzyć indeks.js plik w strony katalog, usuń szablonowy kod Next.js i dodaj następujący kod.

import style z'@/styles/Home.module.css'
import {useRef} z'reagować'
import {useSelector, useDispatch} z„reakcja-redux”
import {SET_NAME} z„../../redux/reducers/profileSlice”
funkcjonowaćWyświetlana nazwa(){
konst {nazwa} = użyjSelector((państwo) => stan.profil)
powrót (

 Jestem {imię} !!</h1> 
 ) }
eksportdomyślnyfunkcjonowaćDom() {
konst inputName = useRef()
konst wysyłka = użyjWyślij()
funkcjonowaćPrześlijNazwa() {
konsola.log (nazwa_wejściowa.bieżąca.wartość)
 wysyłka (SET_NAME(inputName.current.value))
 }
powrót (
 <>

'Wprowadź imię' ref={nazwa_wejściowa} />
Wpisz nazwę</button>

 </main>
 </>
 )}

Powyższy kod tworzy i renderuje komponent Next.js, który umożliwia użytkownikowi wprowadzenie nazwy i wyświetlenie podanej nazwy na stronie przeglądarki. Efektywnie zarządzanie stanem aplikacji za pomocą Redux Toolkit.

The Wyświetlana nazwa składnik wykorzystuje użyjSelektora hak, aby uzyskać dostęp do nazwa właściwość ze stanu profilu w sklepie Redux i renderuje ją na stronie.

Aby wprowadzić nazwę, użytkownik klika przycisk Wprowadź imię przycisk. To wywołuje PrześlijNazwa funkcja, która wysyła tzw SET_NAME akcja z wartością wejściową jako ładunkiem. Ta akcja aktualizuje właściwość name w stanie profilu.

Zaktualizuj plik _app.js

Wreszcie, aby skonfigurować Redux Toolkit do użycia w całej aplikacji Next.js, musisz otoczyć aplikację za pomocą Dostawca Redux — zapewnia to, że magazyn Redux i dostępne stany są dostępne dla wszystkich komponentów w aplikacja.

Otworzyć _app.js plik i zaktualizuj go w następujący sposób:

import {Dostawca} z„reakcja-redux”
import sklep z„../../redux/zapisz”
eksportdomyślnyfunkcjonowaćAplikacja({ Komponent, pageProps }) {
powrót (


 </Dostawca> )
}

Teraz śmiało uruchom serwer programistyczny, aby odzwierciedlić wprowadzone zmiany, i przejdź do niego http://localhost: 3000 w przeglądarce, aby przetestować aplikację.

npm uruchom dev

Obsługa ponownego nawadniania danych podczas ponownego ładowania strony

Ponowne nawadnianie danych podczas ponownego ładowania strony odnosi się do procesu przywracania i inicjowania stanu aplikacji podczas ponownego ładowania strony. W aplikacji Next.js renderowanej przez serwer stan początkowy jest najpierw renderowany na serwerze, a następnie wysyłany do klienta.

Na kliencie kod JavaScript jest odpowiedzialny za odtworzenie stanu aplikacji poprzez pobranie i deserializację stanu serializowanego otrzymanego z serwera.

W ten sposób aplikacja może bezproblemowo przywrócić niezbędne dane i zachować sesję użytkownika. Takie podejście pozwala uniknąć niepotrzebnego pobierania danych i zapewnia nieprzerwane wrażenia użytkownika podczas nawigowania między stronami lub przeładowywania aplikacji.

Jedną z zalet korzystania z Redux Toolkit w aplikacjach Next.js jest jego prostota i przyjazne dla programistów funkcje. Znacznie zmniejsza kod szablonowy wymagany do definiowania akcji, reduktorów i konfiguracji sklepu, ułatwiając i wydajniej pracując z Redux w zarządzaniu stanem.