„React“ integruota konteksto API puikiai tinka būsenos bendrinimui. Sužinokite, kaip jį naudoti su naujausia Next.js versija.

Next.js siūlo keletą požiūrių į valstybės valdymą. Nors kai kuriems iš šių metodų reikia įdiegti naujas bibliotekas, React Context API yra integruota, todėl tai puikus būdas sumažinti išorines priklausomybes.

Naudodami „React Context“ galite sklandžiai perduoti duomenis per įvairias komponentų medžio dalis, todėl nebereikia gręžti atramos. Tai ypač naudinga valdant visuotinę būseną, pvz., dabartinio vartotojo prisijungimo būseną arba pageidaujamą temą.

„React Context“ API supratimas

Prieš pasinerdami į kodą, svarbu suprasti, kas yra React Context API ir kokią problemą ji sprendžia.

Rekvizitai yra veiksmingas būdas dalytis duomenimis tarp komponentų. Jie leidžia perduoti duomenis iš pirminio komponento antriniams komponentams.

Šis metodas yra naudingas, nes jis aiškiai parodo, kurie komponentai naudoja tam tikrus duomenis ir kaip tie duomenys patenka į komponentų medį.

instagram viewer

Tačiau problemų kyla, kai turite giliai įdėtus komponentus, kuriems reikia naudoti tuos pačius rekvizitus. Ši situacija gali sukelti sudėtingumą ir gali sukelti sudėtingą kodą, kurį sunkiau prižiūrėti. Šie klausimai, be kita ko, yra atramos gręžimo trūkumai.

„React Context“ išsprendžia šį iššūkį suteikdamas centralizuotą duomenų kūrimo ir naudojimo metodą, kuris turi būti pasiekiamas visame pasaulyje, visuose komponentuose.

Jis nustato kontekstą šiems duomenims laikyti, kad komponentai galėtų juos pasiekti. Šis metodas padeda struktūrizuoti kodų bazę, kad ji būtų gerai organizuota.

Šio projekto kodą galite rasti jame GitHub saugykla.

Būsenos valdymo pradžia Next.js 13 React Context API naudojimas

„Next.js“ serverio komponentai leidžia kurti programas, kurios geriausiai išnaudoja abu pasaulius: kliento programų interaktyvumą ir serverio atvaizdavimo našumo naudą.

Next.js 13 įdiegia serverio komponentus programėlė katalogas, kuris dabar yra stabilus, pagal numatytuosius nustatymus. Tačiau, kadangi visi komponentai pateikiami serveryje, gali kilti problemų integruojant kliento bibliotekas arba API, pvz., „React Context“.

Norėdami to išvengti, puikus sprendimas yra naudoti klientą vėliavėlė, kurią galite nustatyti failams, kuriuose bus vykdomas kliento kodas.

Norėdami pradėti, sukurkite Next.js 13 projektą vietoje paleisdami šią komandą savo terminale:

npx create-next-app@latest next-context-api

Sukūrę projektą, eikite į jo katalogą:

cd next-context-api

Tada paleiskite kūrimo serverį:

npm run dev

Sukūrę pagrindinį Next.js projektą, galite sukurti pagrindinę užduočių programą, kuri naudoja React Context API būsenai valdyti.

Sukurkite konteksto teikėją

Konteksto teikėjo failas yra centrinis centras, kuriame apibrėžiate ir valdote visuotinę būseną, kurią turi pasiekti komponentai.

Sukurti naują failą, src/context/Todo.context.js, ir užpildykite jį tokiu kodu.

"use client"
import React, { createContext, useReducer } from"react";


const initialState = {
 todos: [],
};


const reducer = (state, action) => {
switch (action.type) {
case"ADD_TODO":
return { ...state, todos: [...state.todos, action.payload] };


case"DELETE_TODO":
return { ...state, todos: state.todos.filter((todo, index) =>
 index !== action.payload) };


case"EDIT_TODO":
const updatedTodos = state.todos.map((todo, index) =>
 index action.payload.index? action.payload.newTodo: todo);
return { ...state, todos: updatedTodos };


default:
return state;
 }
};


exportconst TodoContext = createContext({
 state: initialState,
 dispatch: () =>null,
});


exportconst TodoContextProvider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, initialState);
return (

 {children}
 </TodoContext.Provider>
 );
};

Ši Reakcijos konteksto sąranka apibrėžia a TodoContext kuriame iš pradžių yra tuščio programos darbų sąrašo būsena.

Be pradinės būsenos sukūrimo, ši konteksto konfigūracija apima a reduktorius funkcija, kuri apibrėžia įvairius veiksmų tipus. Šie veiksmų tipai pakeis konteksto būseną, priklausomai nuo suaktyvintų veiksmų. Šiuo atveju veiksmai apima darbų pridėjimą, ištrynimą ir redagavimą.

The „TodoContextProvider“. komponentas suteikia TodoContext kitiems programos komponentams. Šiam komponentui reikia dviejų atramų: vertės atramos, kuri yra pradinė konteksto būsena, ir reduktoriaus atramą, kuri yra reduktoriaus funkcija.

Kai komponentas naudoja „TodoContext“, jis gali pasiekti konteksto būseną ir siųsti veiksmus būsenai atnaujinti.

Pridėkite konteksto teikėją prie programos Next.js

Dabar, norėdami užtikrinti, kad konteksto teikėjas pateikia jūsų Next.js programos šaknyje ir kad visi kliento komponentai gali ją pasiekti, turite pridėti kontekstą prie programos šakninio išdėstymo komponento.

Norėdami tai padaryti, atidarykite src/app/layout.js failą ir apvyniokite vaikų mazgą HTML šablone su konteksto teikėju taip:

import'./globals.css';
import { TodoContextProvider } from"@/context/Todo.context";
exportconst metadata = {
 title: "Create Next App",
 description: "Generated by create next app",
};
exportdefaultfunctionRootLayout({
 children
}) {
return (
"en">

{children}</TodoContextProvider>
 </body>
 </html>
 );
}

Sukurkite užduočių komponentą

Sukurti naują failą, src/components/Todo.jsir pridėkite prie jo šį kodą.

Pradėkite importuodami toliau nurodytus veiksmus. Būtinai įtraukite naudoti klientą vėliavėlę, kad pažymėtumėte šį komponentą kaip kliento pusės komponentą.

"use client"
import { TodoContext } from"@/context/Todo.context";
import React, { useContext, useState } from"react";

Tada apibrėžkite funkcinį komponentą, įskaitant JSX elementus, kurie bus pateikiami naršyklėje.

exportdefaultfunctionTodo() {
return (
marginBottom: "4rem", textAlign: "center" }}>
Todos</h2>



 type="text"
 value={todoText}
 onChange={(e) => setTodoText(e.target.value)}
 style={{ marginBottom: 16}}
 placeholder="Enter a todo"
 />






    

     {state.todos.map((todo, index) => (
  • 

     {index editingIndex? (
     <>
     type="text"
     value={editedTodo}
     onChange={(e) => setEditedTodo(e.target.value)}
     />
    • 



 style={{ marginRight: 16}} 
 onClick={() => handleEditTodo(index, editedTodo)}
 >
 Save
 </button>
 </>
 ): (
 <>
 {todo}
 style={{ marginRight: 16}} 
 onClick={() => setEditingIndex(index)}
 >Edit</button>


 onClick={() => handleDeleteTodo(index)}
 >Delete</button>
 </>
 )}
 </li>
 ))}
 </ul>
 </div>
 );
}

Šiame funkciniame komponente yra įvesties laukai, skirti pridėti, redaguoti ir ištrinti užduotis, kartu su atitinkamais mygtukais. Tai naudoja React sąlyginis atvaizdavimas kad būtų rodomi redagavimo ir trynimo mygtukai pagal redagavimo indekso reikšmę.

Galiausiai kiekvienam veiksmo tipui apibrėžkite reikiamus būsenos kintamuosius ir reikalingas tvarkyklės funkcijas. Funkcijos komponente pridėkite šį kodą.

const { state, dispatch } = useContext(TodoContext);
const [todoText, setTodoText] = useState("");
const [editingIndex, setEditingIndex] = useState(-1);
const [editedTodo, setEditedTodo] = useState("");
const handleAddTodo = () => {
if (todoText.trim() !== "") {
 dispatch({ type: "ADD_TODO", payload: todoText });
 setTodoText("");
 }
 };


const handleDeleteTodo = (index) => {
 dispatch({ type: "DELETE_TODO", payload: index });
 };
const handleEditTodo = (index, newTodo) => {
 dispatch({ type: "EDIT_TODO", payload: { index, newTodo } });
 setEditingIndex(-1);
 setEditedTodo("");
 };

Šios tvarkyklės funkcijos yra atsakingos už vartotojo darbų pridėjimą, ištrynimą ir redagavimą konteksto būsenoje.

Jie užtikrina, kad kai vartotojas prideda, ištrina arba redaguoja užduotį, atitinkami veiksmai būtų siunčiami į konteksto reduktorių, kad būtų atitinkamai atnaujinta būsena.

Pateikite užduočių komponentą

Galiausiai importuokite To-do komponentą į puslapio komponentą.

Norėdami tai padaryti, atidarykite page.js failą src/app kataloge, ištrinkite pagrindinį Next.js kodą ir pridėkite kodą toliau:

import styles from'./page.module.css'
import Todo from'../components/Todo'
exportdefaultfunctionHome() {
return (


 </main>
 )
}

Puiku! Šiuo metu turėtumėte turėti galimybę valdyti būseną programoje To-do Next.js naudodami React Context.

React Context API naudojimas su kitomis valstybės valdymo technologijomis

„React Context“ API yra puikus sprendimas valstybės valdymui. Nepaisant to, jį galima naudoti kartu su kitomis valstybės valdymo bibliotekomis, tokiomis kaip „Redux“. Šis hibridinis metodas užtikrina, kad skirtingoms programos dalims, kurios atlieka pagrindinius vaidmenis, naudojate geriausią įrankį.

Tai darydami galite pasinaudoti įvairių valstybės valdymo sprendimų privalumais, kad sukurtumėte efektyvias ir prižiūrimas programas.