Saat mengelola status kompleks di aplikasi Berikutnya, banyak hal bisa menjadi rumit dengan cepat. Kait tradisional seperti useState bantuan dengan manajemen negara tetapi menghadirkan masalah pengeboran prop. Pengeboran penyangga berarti meneruskan data atau fungsi ke bawah melalui beberapa komponen.

Pendekatan yang lebih baik akan memisahkan logika manajemen status Anda dari komponen dan memperbarui status ini dari mana saja di aplikasi Anda. Kami akan memandu Anda tentang cara menggunakan API Konteks saat kami membuat aplikasi daftar tugas sederhana.

Sebelum Anda Memulai Daftar Tugas Anda

Sebelum Anda dapat membuat aplikasi daftar tugas, Anda memerlukan:

  • Pengetahuan dasar tentang operator JavaScript modern Dan Kait useState React.
  • Pemahaman tentang cara merusak array dan objek dalam JavaScript.
  • Node v16.8 atau yang lebih baru diinstal pada mesin lokal Anda dan familiar dengannya manajer paket seperti npm atau benang.

Anda dapat menemukan proyek yang sudah selesai di GitHub untuk referensi dan eksplorasi lebih lanjut.

instagram viewer

Memahami Status Aplikasi dan Manajemen

Status aplikasi mengacu pada kondisi aplikasi saat ini pada titik waktu tertentu. Ini termasuk informasi yang diketahui dan dikelola oleh aplikasi, seperti input pengguna dan data yang diambil dari database atau API (Application Programming Interface).

Untuk memahami status aplikasi, pertimbangkan kemungkinan status aplikasi penghitung sederhana. Mereka termasuk:

  • Keadaan default ketika penghitung berada di nol.
  • Keadaan yang meningkat ketika penghitung bertambah satu.
  • Keadaan yang menurun ketika penghitung berkurang satu.
  • Keadaan reset ketika penghitung kembali ke keadaan default.

Komponen React dapat mengikuti perubahan status. Saat pengguna berinteraksi dengan komponen semacam itu, tindakannya—seperti klik tombol—dapat mengelola pembaruan ke status.

Cuplikan ini menampilkan aplikasi penghitung sederhana, dalam status defaultnya, yang mengelola status berdasarkan tindakan klik:

const [penghitung, setCounter] = useState(0);
kembali (

{counter}</h1>

Pengaturan dan Instalasi

Repositori proyek berisi dua cabang: starter Dan konteks. Anda dapat menggunakan cabang pemula sebagai basis untuk membangun proyek dari atau cabang konteks untuk melihat demo final.

Mengkloning Aplikasi Pemula

Aplikasi awal menyediakan UI yang Anda perlukan untuk aplikasi akhir, sehingga Anda dapat berfokus pada penerapan logika inti. Buka terminal dan jalankan perintah berikut untuk mengkloning cabang awal repositori ke mesin lokal Anda:

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

Jalankan perintah berikut, di dalam direktori proyek, untuk menginstal dependensi dan memulai server pengembangan Anda:

benang && benang dev

Atau:

npm i && npm jalankan dev

Jika semuanya berjalan lancar, UI akan ditampilkan di browser Anda:

Menerapkan Logika

Context API menyediakan cara untuk mengelola dan berbagi data status di seluruh komponen, tanpa memerlukan pengeboran penyangga manual.

Langkah 1: Buat dan Ekspor Konteks

Membuat src/aplikasi/konteks folder untuk menyimpan file konteks dan menjaga direktori proyek tetap teratur. Di dalam folder ini, buat a todo.context.jsx file yang akan berisi semua logika konteks untuk aplikasi.

Impor createContext fungsi dari reaksi perpustakaan dan menyebutnya, menyimpan hasilnya dalam variabel:

impor { buatKonteks} dari"reaksi";
const TodoContext = createContext();

Selanjutnya, buat kustom useTodoContext kait yang kembali TodoContext dalam bentuk yang dapat digunakan.

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

Langkah 2: Buat dan Kelola Negara

Untuk melakukan tindakan CRUD (Buat, Baca, Perbarui, Hapus) aplikasi, Anda harus membuat status dan mengelolanya dengan Pemberi komponen.

const TodoContextProvider = ({ anak-anak }) => {
const [tugas, setTask] = useState("");
const [tugas, setTasks] = useState([]);
kembali<TodoContext. Pemberinilai={{}}>{anak-anak}TodoContext. Pemberi>;
};
eksporbawaan TodoContextProvider;

Tepat sebelum kembali pernyataan, buat a handleTodoInput fungsi yang akan dijalankan saat pengguna mengetikkan daftar tugas. Fungsi ini kemudian memperbarui tugas negara.

const handleTodoInput = (memasukkan) => setTask (masukan);

Tambah sebuah buatTugas fungsi yang akan dijalankan saat pengguna mengirimkan tugas. Fungsi ini memperbarui tugas menyatakan dan memberikan tugas baru ID acak.

const buat Tugas = (e) => {
 e.preventDefault();
 setTugas([
 {
 pengenal: Matematika.trunc(Matematika.acak() * 1000 + 1),
 tugas,
 },
 ...tugas,
 ]);
 };

Buat sebuah updateTask fungsi yang memetakan melalui tugas daftar dan perbarui tugas yang ID-nya cocok dengan ID tugas yang diklik.

const updateTask = (id, updateTeks) =>
 setTasks (tugas.peta((T) => (t.id id? { ...T, tugas: updateTeks }: t)));

Membuat deleteTask fungsi yang memperbarui tugas list sehingga menyertakan semua tugas yang ID-nya tidak cocok dengan parameter yang diberikan.

const deleteTask = (pengenal) => setTasks (tugas.filter((T) => t.id !== id));

Langkah 3: Tambahkan Status dan Penangan ke Penyedia

Sekarang Anda telah membuat status dan kode tertulis untuk mengelolanya, Anda perlu membuat status dan fungsi penangan ini tersedia untuk Pemberi. Anda dapat menyediakannya dalam bentuk objek, menggunakan nilai properti dari Pemberi komponen.

kembali (
 nilai={{
 tugas,
 tugas,
 handleTodoInput,
 buatTugas,
 perbaruiTugas,
 hapusTugas,
 }}
 >
 {anak-anak}
 </TodoContext.Provider>
);

Langkah 4: Lingkup Konteks

Itu Pemberi yang Anda buat harus membungkus komponen tingkat atas agar konteks tersedia untuk seluruh aplikasi. Untuk melakukan ini, edit src/app/page.jsx dan bungkus Semuanya komponen dengan TodoContextProvider komponen:


;
</TodoContextProvider>;

Langkah 5: Gunakan Konteks di Komponen

Edit Anda src/app/components/Todos.jsx file dan hancurkan tugas, tugas, handleTodoInput, Dan buatTugas melalui panggilan ke useTodoContext fungsi.

const { tugas, tugas, handleTodoInput, createTask } = useTodoContext();

Sekarang, perbarui elemen formulir untuk menangani acara kirim dan ubah bidang input utama:

 buat Tugas (e)}>
"input-todo" jenis="teks" placeholder="Masukkan tugas" nilai yang diperlukan={tugas} onChange={(e) => handleTodoInput (e.target.nilai)} />
"kirim-todo" jenis="kirim" nilai="Tambah tugas" />
</form>

Langkah 6: Render Tugas di UI

Anda sekarang dapat menggunakan aplikasi untuk membuat dan menambahkan tugas ke tugas daftar. Untuk memperbarui tampilan, Anda harus memetakan melalui yang sudah ada tugas dan merendernya di UI. Pertama, buat a src/app/components/Todo.jsx komponen untuk menampung satu item agenda.

Dalam src/app/components/Todo.jsx komponen, edit atau hapus tugas dengan menjalankan updateTask Dan deleteTask fungsi yang kita buat src/app/context/todo.context.jsx mengajukan.

impor Bereaksi, { useState } dari"reaksi";
impor { useTodoContext } dari"../konteks/todo.konteks";
const Todo = ({ tugas }) => {
const { updateTask, deleteTask } = useTodoContext();


// status isEdit melacak saat tugas dalam mode edit
const [isEdit, setIsEdit] = useState(PALSU);


kembali (

"todo-wrapper">


 {iniEdit? ( <memasukkanjenis="teks"nilai={tugas.tugas}
 onChange={(e) => updateTask (task.id, e.target.nilai)} /> ) :
 (<thnama kelas="tugas">{tugas.tugas}th> )}



"tindakan">






eksporbawaan Melakukan;

Untuk merender src/app/components/Todo.jsx komponen untuk masing-masing tugas, masuk ke src/app/components/Todos.jsx file dan peta kondisional melalui tugas tepat setelah tajuk tag penutup.

{tugas && (

 {tugas.peta((tugas, i) => ( <Melakukankunci={Saya}tugas={tugas} /> ))}
</main>
)}

Uji aplikasi Anda di browser dan konfirmasikan bahwa aplikasi tersebut memberikan hasil yang diharapkan.

Menyimpan Tugas di Penyimpanan Lokal

Saat ini, menyegarkan halaman akan menyetel ulang tugas, membuang tugas yang telah Anda buat. Salah satu cara untuk memperbaiki masalah ini adalah dengan menyimpan tugas di penyimpanan lokal browser.

API penyimpanan Web adalah peningkatan pada penyimpanan cookie, dengan fitur yang meningkatkan pengalaman bagi pengguna dan pengembang.