Podczas zarządzania złożonymi stanami w aplikacji Next sprawy mogą szybko stać się trudne. Tradycyjne haczyki np stan użycia pomoc w zarządzaniu państwem, ale przedstawiają problem wiercenia podporowego. Wiercenie podporowe oznacza przekazywanie danych lub funkcji przez kilka komponentów.

Lepszym podejściem byłoby oddzielenie logiki zarządzania stanem od komponentów i aktualizowanie tych stanów z dowolnego miejsca w aplikacji. Podczas tworzenia prostej aplikacji z listą rzeczy do zrobienia przeprowadzimy Cię przez proces korzystania z interfejsu API kontekstu.

Zanim zaczniesz tworzyć listę rzeczy do zrobienia

Zanim zbudujesz aplikację listy rzeczy do zrobienia, będziesz potrzebować:

  • Podstawowa wiedza nt nowoczesne operatory JavaScript I Hak useState Reacta.
  • Zrozumienie, jak to zrobić destrukturyzować tablice i obiekty w JavaScript.
  • Węzeł v16.8 lub nowszej zainstalowanej na komputerze lokalnym i znajomości menedżery pakietów, takie jak npm lub przędza.

Gotowy projekt można znaleźć na GitHub w celach informacyjnych i dalszych poszukiwań.

instagram viewer

Zrozumienie stanu aplikacji i zarządzania

Stan aplikacji odnosi się do bieżącego stanu aplikacji w danym momencie. Obejmuje to informacje, które aplikacja zna i którymi zarządza, takie jak dane wprowadzane przez użytkownika i dane pobrane z bazy danych lub interfejsu API (interfejs programowania aplikacji).

Aby zrozumieć stan aplikacji, rozważ możliwe stany prostej aplikacji licznika. Zawierają:

  • Stan domyślny gdy licznik jest na zero.
  • Zwiększony stan gdy licznik wzrośnie o jeden.
  • Stan obniżony gdy licznik zmniejszy się o jeden.
  • Stan resetu gdy licznik powróci do stanu domyślnego.

Komponent React może subskrybować zmiany stanu. Gdy użytkownik wchodzi w interakcję z takim komponentem, jego działania — takie jak kliknięcia przycisków — mogą zarządzać aktualizacjami stanu.

Ten fragment kodu przedstawia prostą aplikację licznika w stanie domyślnym, która zarządza stanem na podstawie kliknięć:

konst [licznik, setCounter] = useState(0);
powrót (

{licznik}</h1>

Konfiguracja i instalacja

Repozytorium projektu zawiera dwie gałęzie: rozrusznik I kontekst. Możesz użyć gałęzi początkowej jako podstawy do zbudowania projektu lub gałęzi kontekstowej, aby wyświetlić podgląd ostatecznej wersji demonstracyjnej.

Klonowanie aplikacji startowej

Aplikacja startowa zapewnia interfejs użytkownika potrzebny do ostatecznej aplikacji, dzięki czemu możesz skupić się na implementacji podstawowej logiki. Otwórz terminal i uruchom następujące polecenie, aby sklonować gałąź startową repozytorium na maszynę lokalną:

git klon -b rozrusznik https://github.com/makeuseofcode/Next.js-CRUD-todo-app.git

Uruchom następujące polecenie w katalogu projektu, aby zainstalować zależności i uruchomić serwer deweloperski:

twórca przędzy i przędzy

Lub:

npm i && npm run dev

Jeśli wszystko poszło dobrze, interfejs użytkownika powinien wyświetlić się w przeglądarce:

Implementacja logiki

Kontekstowy interfejs API zapewnia sposób zarządzania i udostępniania danych stanu między komponentami, bez konieczności ręcznego wiercenia podpór.

Krok 1: Utwórz i wyeksportuj kontekst

Stwórz źródło/aplikacja/kontekst folder do przechowywania pliku kontekstu i utrzymywania porządku w katalogu projektu. W tym folderze utwórz plik todo.kontekst.jsx plik, który będzie zawierał całą logikę kontekstu dla aplikacji.

Importuj utwórz kontekst funkcja od reagować bibliotekę i wywołaj ją, przechowując wynik w zmiennej:

import { utwórz kontekst} z"reagować";
konst TodoContext = createContext();

Następnie utwórz niestandardowy użyjTodoContext haczyk, który powraca TodoContext w postaci użytkowej.

eksportkonst useTodoContext = () => useContext (TodoContext);

Krok 2: Twórz stany i zarządzaj nimi

Aby wykonać akcje CRUD aplikacji (Create, Read, Update, Delete), musisz utworzyć stany i zarządzać nimi za pomocą Dostawca część.

konst TodoContextProvider = ({ dzieci }) => {
konst [zadanie, ustawzadanie] = useState("");
konst [zadania, ustawzadania] = useState([]);
powrót<TodoContext. Dostawcawartość={{}}>{dzieci}TodoContext. Dostawca>;
};
eksportdomyślny TodoContextProvider;

Tuż przed powrót oświadczenie, utwórz a uchwytTodoInput funkcja, która zostanie uruchomiona, gdy użytkownik wpisze zadanie. Ta funkcja następnie aktualizuje plik zadanie państwo.

konst handleTodoInput = (wejście) => setTask (wejście);

Dodać utwórz zadanie funkcja, która zostanie uruchomiona, gdy użytkownik prześle zadanie do wykonania. Ta funkcja aktualizuje plik zadania stan i przypisuje nowemu zadaniu losowy identyfikator.

konst utwórz zadanie = (mi) => {
 e.preventDefault();
 ustawZadania([
 {
 ID: Matematyka.trunc(Matematyka.losowy() * 1000 + 1),
 zadanie,
 },
 ...zadania,
 ]);
 };

Stworzyć aktualizacjaZadanie funkcja, która odwzorowuje przez zadania wyświetla i aktualizuje zadanie, którego identyfikator jest zgodny z identyfikatorem klikniętego zadania.

konst aktualizacjaZadanie = (identyfikator, aktualizuj tekst) =>
 setTasks (zadania.map((T) => (t.id id? { ...T, zadanie: updateText }: t)));

Stwórz usuń zadanie funkcja aktualizująca plik zadania list tak, aby zawierała wszystkie zadania, których identyfikator nie pasuje do podanego parametru.

konst usuń zadanie = (ID) => setTasks (tasks.filter((T) => t.id !== id));

Krok 3: Dodaj stany i moduły obsługi do dostawcy

Teraz, gdy utworzyłeś stany i napisałeś kod do zarządzania nimi, musisz udostępnić te stany i funkcje obsługi Dostawca. Możesz dostarczyć je w postaci obiektu, korzystając z tzw wartość własność r Dostawca część.

powrót (
 wartość={{
 zadanie,
 zadania,
 uchwytTodoInput,
 utwórz zadanie,
 aktualizacjaZadanie,
 usuń zadanie,
 }}
 >
 {dzieci}
 </TodoContext.Provider>
);

Krok 4: Określ zakres kontekstu

The Dostawca utworzony przez Ciebie komponent musi otaczać komponent najwyższego poziomu, aby kontekst był dostępny dla całej aplikacji. Aby to zrobić, edytuj src/aplikacja/strona.jsx i zawiń Todos składnik z TodoContextProvider część:


;
</TodoContextProvider>;

Krok 5: Użyj kontekstu w komponentach

Edytuj swoje src/app/components/Todos.jsx plik i zniszczyć zadania, zadanie, uchwytTodoInput, I utwórz zadanie przez telefon do użyjTodoContext funkcjonować.

konst { zadanie, zadania, handleTodoInput, createTask } = useTodoContext();

Teraz zaktualizuj element formularza, aby obsługiwał zdarzenie przesyłania i zmiany w głównym polu wprowadzania:

 utwórz Zadanie (e)}>
„todo-input” typ="tekst" symbol zastępczy=„Wprowadź zadanie” wymagana wartość={zadanie} onChange={(e) => handleTodoInput (e.target.value)} />
„prześlij do zrobienia” typ="składać" wartość="Dodaj zadanie" />
</form>

Krok 6: Renderuj zadania w interfejsie użytkownika

Możesz teraz używać aplikacji do tworzenia i dodawania zadań do zadania lista. Aby zaktualizować wyświetlacz, musisz zmapować istniejące zadania i renderuj je w interfejsie użytkownika. Najpierw utwórz a src/app/components/Todo.jsx komponent do przechowywania pojedynczej rzeczy do zrobienia.

w ciągu src/app/components/Todo.jsx komponent, edytuj lub usuń zadanie, wywołując plik aktualizacjaZadanie I usuń zadanie funkcje, w których stworzyliśmy src/app/context/todo.context.jsx plik.

import Reaguj, { stan użycia } z"reagować";
import { useTodoContext } z"../kontekst/do zrobienia.kontekst";
konst Do zrobienia = ({ zadanie }) => {
konst { updateTask, deleteTask } = useTodoContext();


// Śledzenie stanu isEdit, gdy zadanie jest w trybie edycji
konst [isEdit, setIsEdit] = useState(FAŁSZ);


powrót (

„opakowanie zadań”>


 {czy edytować? ( <wejścietyp="tekst"wartość={zadanie.zadanie}
 onChange={(e) => updateTask (task.id, e.target.value)} /> ) :
 (<czNazwa klasy="zadanie">{zadanie.zadanie}cz> )}



"działania">






eksportdomyślny Do zrobienia;

Aby renderować src/app/components/Todo.jsx składnik dla każdego zadanie, wejdź do src/app/components/Todos.jsx plik i warunkowo mapuj przez zadania zaraz po nagłówek tag zamykający.

{zadania && (

 {zadania.map((zadanie, I) => ( <Do zrobieniaklucz={I}zadanie={zadanie} /> ))}
</main>
)}

Przetestuj swoją aplikację w przeglądarce i potwierdź, że daje oczekiwany rezultat.

Zapisywanie zadań w pamięci lokalnej

Obecnie odświeżenie strony spowoduje zresetowanie zadań, odrzucając wszystkie utworzone przez Ciebie. Jednym ze sposobów rozwiązania tego problemu jest przechowywanie zadań w lokalnej pamięci przeglądarki.

Web storage API to ulepszenie przechowywania plików cookie z funkcjami poprawiającymi komfort zarówno użytkowników, jak i programistów.