API Konteks bawaan React sangat cocok untuk berbagi negara. Cari tahu cara menggunakannya dengan Next.js versi terbaru.

Next.js menawarkan beberapa pendekatan terhadap pengelolaan negara. Meskipun beberapa metode ini memerlukan instalasi pustaka baru, API Konteks React sudah ada di dalamnya, sehingga merupakan cara yang bagus untuk mengurangi ketergantungan eksternal.

Dengan React Context, Anda dapat dengan mudah meneruskan data melalui berbagai bagian pohon komponen Anda, sehingga menghilangkan kerumitan pengeboran penyangga. Hal ini sangat berguna untuk mengelola status global seperti status login pengguna saat ini atau tema pilihan mereka.

Memahami React Context API

Sebelum mendalami kodenya, penting untuk melakukannya memahami apa itu React Context API dan masalah apa yang diatasinya.

Alat peraga memberikan metode yang efektif untuk berbagi data antar komponen. Mereka memungkinkan Anda meneruskan data dari komponen induk ke komponen turunannya.

Pendekatan ini berguna karena menunjukkan dengan jelas komponen mana yang menggunakan data tertentu dan bagaimana data mengalir ke bawah pohon komponen.

instagram viewer

Namun, masalah muncul ketika Anda memiliki komponen yang sangat bertumpuk dan perlu menggunakan props yang sama. Situasi ini dapat menimbulkan kerumitan dan berpotensi mengakibatkan kode berbelit-belit sehingga lebih sulit dipertahankan. Permasalahan tersebut antara lain adalah kelemahan pengeboran prop.

React Context memecahkan tantangan ini dengan menyediakan metode terpusat untuk membuat dan menggunakan data yang harus dapat diakses secara global, di seluruh komponen.

Ini menyiapkan konteks untuk menyimpan data ini, memungkinkan komponen untuk mengaksesnya. Pendekatan ini membantu Anda menyusun basis kode untuk memastikannya terorganisir dengan baik.

Anda dapat menemukan kode proyek ini di dalamnya GitHub gudang.

Memulai Manajemen Negara di Next.js 13 Menggunakan React Context API

Komponen Server Next.js memungkinkan Anda membuat aplikasi yang memanfaatkan kedua dunia: interaktivitas aplikasi sisi klien dan manfaat kinerja rendering server.

Next.js 13 mengimplementasikan Komponen Server di aplikasi direktori—yang sekarang stabil—secara default. Namun, karena semua komponen dirender oleh server, Anda mungkin mengalami masalah saat mengintegrasikan pustaka sisi klien atau API seperti React Context.

Untuk menghindari hal ini, solusi yang bagus adalah gunakan klien tanda yang dapat Anda atur pada file yang akan menjalankan kode sisi klien.

Untuk memulai, buat proyek Next.js 13 secara lokal dengan menjalankan perintah ini di terminal Anda:

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

Setelah membuat proyek, navigasikan ke direktorinya:

cd next-context-api

Kemudian mulai server pengembangan:

npm run dev

Setelah Anda menyiapkan proyek dasar Next.js, Anda dapat membuat aplikasi tugas dasar yang menggunakan React Context API untuk pengelolaan status.

Buat Penyedia Konteks

File penyedia konteks berfungsi sebagai hub pusat tempat Anda menentukan dan mengelola status global yang perlu diakses oleh komponen.

Buat file baru, src/konteks/Todo.konteks.js, dan isi dengan kode berikut.

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

Pengaturan React Context ini mendefinisikan a Konteks Todo yang awalnya berisi status daftar tugas kosong untuk aplikasi.

Selain membuat keadaan awal, konfigurasi konteks ini mencakup a peredam fungsi yang mendefinisikan berbagai jenis tindakan. Jenis tindakan ini akan mengubah keadaan konteks bergantung pada tindakan yang dipicu. Dalam hal ini, tindakannya mencakup menambah, menghapus, dan mengedit tugas.

Itu Penyedia TodoContext komponen menyediakan Konteks Todo ke komponen lain dalam aplikasi. Komponen ini membutuhkan dua props: prop nilai, yang merupakan keadaan awal konteks, dan prop peredam, yang merupakan fungsi peredam.

Saat komponen menggunakan TodoContext, komponen dapat mengakses status konteks dan mengirimkan tindakan untuk memperbarui status.

Tambahkan Penyedia Konteks ke Aplikasi Next.js

Sekarang, untuk memastikan bahwa penyedia konteks merender di root aplikasi Next.js Anda, dan semua komponen klien dapat mengaksesnya, Anda perlu menambahkan konteks ke komponen tata letak root aplikasi.

Untuk melakukan ini, buka src/aplikasi/layout.js file dan bungkus simpul anak dalam templat HTML dengan penyedia konteks sebagai berikut:

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

Buat Komponen Agenda

Buat file baru, src/komponen/Todo.js, dan tambahkan kode berikut ke dalamnya.

Mulailah dengan melakukan impor berikut. Pastikan untuk menyertakan gunakan klien tandai untuk menandai komponen ini sebagai komponen sisi klien.

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

Selanjutnya, tentukan komponen fungsional, termasuk elemen JSX yang akan dirender di browser.

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

Komponen fungsional ini mencakup kolom input untuk menambah, mengedit, dan menghapus tugas, bersama dengan tombol yang sesuai. Ini menggunakan Render bersyarat React untuk menampilkan tombol edit dan hapus berdasarkan nilai indeks pengeditan.

Terakhir, tentukan variabel status yang diperlukan dan fungsi pengendali yang diperlukan untuk setiap jenis tindakan. Di dalam komponen fungsi, tambahkan kode berikut.

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

Fungsi handler ini bertugas menangani penambahan, penghapusan, dan pengeditan tugas pengguna dalam status konteks.

Mereka memastikan bahwa ketika pengguna menambahkan, menghapus, atau mengedit tugas, tindakan yang sesuai dikirim ke peredam konteks untuk memperbarui statusnya.

Render Komponen Agenda

Terakhir, impor komponen Agenda ke dalam komponen halaman.

Untuk melakukannya, buka file page.js di direktori src/app, hapus kode boilerplate Next.js, dan tambahkan kode di bawah ini:

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


 </main>
 )
}

Besar! Pada titik ini, Anda seharusnya sudah bisa mengelola status di aplikasi To-do Next.js menggunakan React Context.

Menggunakan React Context API Dengan Teknologi Manajemen Negara Lainnya

React Context API adalah solusi hebat untuk pengelolaan negara. Meskipun demikian, dimungkinkan untuk menggunakannya bersama perpustakaan manajemen negara lainnya seperti Redux. Pendekatan hibrid ini memastikan Anda menggunakan alat terbaik untuk berbagai bagian aplikasi Anda yang menjalankan peran penting.

Dengan melakukan hal ini, Anda dapat memanfaatkan manfaat dari berbagai solusi manajemen negara untuk menciptakan aplikasi yang efisien dan mudah dipelihara.