Reactin sisäänrakennettu Context API on täydellinen tilan jakamiseen. Opi käyttämään sitä Next.js: n uusimman version kanssa.

Next.js tarjoaa useita lähestymistapoja tilanhallintaan. Vaikka jotkin näistä menetelmistä vaativat uusien kirjastojen asentamisen, Reactin Context API on sisäänrakennettu, joten se on loistava tapa vähentää ulkoisia riippuvuuksia.

React Contextin avulla voit siirtää tietoja saumattomasti komponenttipuusi eri osien läpi, mikä poistaa potkuriporauksen vaivan. Tämä on erityisen hyödyllistä hallittaessa globaalia tilaa, kuten nykyisen käyttäjän kirjautumistilaa tai hänen haluamansa teemaa.

React Context API: n ymmärtäminen

Ennen kuin sukellat koodiin, on tärkeää ymmärtää, mikä React Context API on ja mitä ongelmaa se ratkaisee.

Props tarjoaa tehokkaan menetelmän tietojen jakamiseen komponenttien välillä. Niiden avulla voit siirtää tietoja pääkomponentista sen alikomponentteihin.

Tämä lähestymistapa on hyödyllinen, koska se näyttää selkeästi, mitkä komponentit käyttävät tiettyä dataa ja kuinka tieto kulkee komponenttipuussa.

instagram viewer

Ongelmia syntyy kuitenkin, kun sinulla on syvälle sisäkkäisiä komponentteja, joiden on kulutettava samoja rekvisiitta. Tämä tilanne voi aiheuttaa monimutkaisuutta ja mahdollisesti johtaa mutkaiseen koodiin, jota on vaikeampi ylläpitää. Näitä kysymyksiä ovat muun muassa potkurin porauksen haitat.

React Context ratkaisee tämän haasteen tarjoamalla keskitetyn menetelmän datan luomiseen ja käyttämiseen, jonka on oltava saatavilla maailmanlaajuisesti, eri komponenttien välillä.

Se määrittää kontekstin näiden tietojen säilyttämiseksi, jolloin komponentit voivat käyttää niitä. Tämä lähestymistapa auttaa sinua jäsentämään koodikantaasi varmistaaksesi, että se on hyvin järjestetty.

Löydät tämän projektin koodin siitä GitHub arkisto.

State Managementin käytön aloittaminen Next.js: ssä 13 React Context API: n käyttäminen

Next.js-palvelinkomponenttien avulla voit luoda sovelluksia, jotka hyödyntävät molempia maailmoja: asiakaspuolen sovellusten vuorovaikutteisuutta ja palvelimen renderöinnin suorituskykyetuja.

Next.js 13 toteuttaa palvelinkomponentit sovellus hakemistoon - joka on nyt vakaa - oletuksena. Koska kaikki komponentit ovat palvelimen hahmontamia, saatat kohdata ongelmia integroitaessa asiakaspuolen kirjastoja tai API: ita, kuten React Context.

Tämän välttämiseksi on hyvä ratkaisu käytä asiakasta lippu, jonka voit asettaa tiedostoille, jotka suorittavat asiakaspuolen koodia.

Aloita luomalla Next.js 13 -projekti paikallisesti suorittamalla tämä komento päätteessäsi:

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

Kun olet luonut projektin, siirry sen hakemistoon:

cd next-context-api

Käynnistä sitten kehityspalvelin:

npm run dev

Kun olet määrittänyt Next.js-perusprojektin, voit rakentaa perustehtäväsovelluksen, joka käyttää React Context API: ta tilanhallintaan.

Luo kontekstintarjoaja

Kontekstintarjoajatiedosto toimii keskuskeskuksena, jossa määrität ja hallitset globaalia tilaa, jota komponenttien on käytettävä.

Luo uusi tiedosto, src/context/Todo.context.js, ja täytä se seuraavalla koodilla.

"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>
 );
};

Tämä React Context -asetus määrittää a TodoContext joka alun perin sisältää sovelluksen tyhjän tehtäväluettelon tilan.

Alkutilan luomisen lisäksi tämä kontekstimääritys sisältää a vähennin toiminto, joka määrittää erilaisia ​​toimintatyyppejä. Nämä toimintotyypit muokkaavat kontekstin tilaa käynnistetyistä toimista riippuen. Tässä tapauksessa toimintoihin kuuluvat tehtävien lisääminen, poistaminen ja muokkaaminen.

The TodoContextProvider komponentti tarjoaa TodoContext muihin sovelluksen komponentteihin. Tämä komponentti ottaa kaksi rekvisiittaa: arvo prop, joka on kontekstin alkutila, ja supistuspotkuri, joka on vähennystoiminto.

Kun komponentti kuluttaa TodoContextin, se voi käyttää kontekstin tilaa ja lähettää toimintoja tilan päivittämiseksi.

Lisää Context Provider Next.js-sovellukseen

Nyt varmistaaksesi, että kontekstin tarjoaja hahmontaa Next.js-sovelluksesi juuressa ja että kaikki asiakaskomponentit voivat käyttää sitä, sinun on lisättävä konteksti sovelluksen juuriasettelukomponenttiin.

Voit tehdä tämän avaamalla src/app/layout.js tiedosto ja kääri lapsisolmu HTML-malliin kontekstintarjoajan kanssa seuraavasti:

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>
 );
}

Luo tehtäväkomponentti

Luo uusi tiedosto, src/components/Todo.jsja lisää siihen seuraava koodi.

Aloita tekemällä seuraavat tuonnit. Muista sisällyttää käytä asiakasta lippu merkitäksesi tämän komponentin asiakaspuolen komponentiksi.

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

Määritä seuraavaksi toiminnallinen komponentti, mukaan lukien JSX-elementit, jotka hahmonnetaan selaimessa.

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>
 );
}

Tämä toiminnallinen komponentti sisältää syöttökenttiä tehtävien lisäämistä, muokkaamista ja poistamista varten sekä vastaavat painikkeet. Se käyttää Reactin ehdollinen renderöinti näyttääksesi muokkaus- ja poistopainikkeet muokkausindeksin arvon perusteella.

Lopuksi määritä vaaditut tilamuuttujat ja vaaditut käsittelijän funktiot kullekin toimintotyypille. Lisää funktiokomponentin sisään seuraava koodi.

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("");
 };

Nämä käsittelijätoiminnot vastaavat käyttäjän tehtävien lisäämisestä, poistamisesta ja muokkaamisesta kontekstin tilassa.

Ne varmistavat, että kun käyttäjä lisää, poistaa tai muokkaa tehtävän, asianmukaiset toiminnot lähetetään kontekstin supistimeen tilan päivittämiseksi vastaavasti.

Renderöi tehtäväkomponentti

Tuo lopuksi To-do-komponentti sivukomponenttiin.

Voit tehdä tämän avaamalla page.js-tiedoston src/app-hakemistossa, poistamalla yleiskoodin Next.js-koodin ja lisäämällä alla olevan koodin:

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


 </main>
 )
}

Loistava! Tässä vaiheessa sinun pitäisi pystyä hallitsemaan tilaa To-do Next.js -sovelluksessa React Contextin avulla.

React Context API: n käyttö muiden tilanhallintatekniikoiden kanssa

React Context API on loistava ratkaisu tilanhallintaan. Siitä huolimatta on mahdollista käyttää sitä muiden valtionhallintakirjastojen, kuten Reduxin, kanssa. Tämä hybridilähestymistapa varmistaa, että käytät parasta työkalua sovelluksesi eri osissa, jotka suorittavat avainrooleja.

Näin voit hyödyntää eri valtionhallinnon ratkaisujen edut tehokkaiden ja ylläpidettävien sovellusten luomiseksi.