ReactJS - Menggunakan useReducer

Hai, para pemrogram yang sedang mencari ilmu! Hari ini, kita akan melangsungkan sebuah perjalanan yang menarik ke dunia hook React, khususnya fokus pada hook useReducer yang kuat. Jangan khawatir jika Anda baru dalam pemrograman – saya akan mengajarkan Anda secara langkah demi langkah, seperti yang saya lakukan untuk ribuan murid dalam tahunajaran saya. Ayo masuk ke dalamnya!

Apa itu useReducer?

Sebelum kita masuk ke detailnya, mari kita pahami apa itu useReducer. Bayangkan Anda sedang main permainan video dimana karakter Anda memiliki berbagai keadaan – kesehatan, kekuatan, dan kecepatan. Ketika Anda main, keadaan ini berubah berdasarkan tindakan Anda. useReducer adalah seperti mesin permainan yang mengelola perubahan keadaan ini berdasarkan aturan khusus.

Dalam istilah React, useReducer adalah hook yang membantu kita mengelola logika keadaan yang kompleks dalam aplikasi kita. Ini sangat berguna ketika Anda memiliki banyak sub-nilai dalam keadaan Anda, atau ketika keadaan berikutnya tergantung pada yang sebelumnya.

Tanda Tangan hook useReducer

Sekarang, mari kita lihat bagaimana kita benar-benar menggunakan useReducer dalam kode kita. Ini adalah struktur dasarnya:

const [state, dispatch] = useReducer(reducer, initialState);

mari kita pecah ini:

• state: Ini adalah keadaan saat ini kita, seperti kesehatan saat ini karakter kita dalam analogi permainan.
• dispatch: Ini adalah fungsi yang kita gunakan untuk mengirimkan aksi untuk memperbarui keadaan kita.
• reducer: Ini adalah fungsi yang menentukan bagaimana keadaan kita harus berubah dalam respons terhadap aksi.
• initialState: Ini adalah keadaan awal aplikasi kita.

Mungkin terlihat sedikit membingungkan saat ini, tapi jangan khawatir! Kita akan melihat ini dalam aksi dan itu akan membuat sense.

Menggunakan hook reducer

Mari kita buat sebuah aplikasi penghitung sederhana untuk memahami bagaimana useReducer bekerja. Kita akan mulai dengan pengaturan dasar dan kemudian membangun atasnya.

import React, { useReducer } from 'react';

// Langkah 1: Definisikan keadaan awal
const initialState = { count: 0 };

// Langkah 2: Buat fungsi reducer
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;
}
}

// Langkah 3: Buat komponen Counter
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);

return (
<div>
Count: {state.count}
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</div>
);
}

export default Counter;

mari kita pecah ini langkah demi langkah:

1. Kita import useReducer dari React.
2. Kita tentukan initialState dengan hitungan 0.
3. Kita buat fungsi reducer yang mengambil keadaan saat ini dan action, dan mengembalikan keadaan baru berdasarkan jenis aksi.
4. Dalam komponen Counter, kita gunakan useReducer untuk mendapatkan keadaan saat ini dan fungsi dispatch.
5. Kita render hitungan saat ini dan dua tombol yang mengirimkan aksi 'increment' dan 'decrement' saat ditekan.

Ketika Anda mengklik tombol '+', itu mengirimkan aksi 'increment', yang ditangani oleh reducer kita dengan meningkatkan hitungan. Tombol '-' bekerja sama seperti itu untuk mengurangi.

Menggunakan useReducer

Sekarang, kita telah melihat contoh dasar, mari kita jelajahi sebuah konteks yang lebih kompleks. Bayangkan kita sedang membangun aplikasi manajemen tugas sederhana. Kita akan menggunakan useReducer untuk mengelola penambahan dan penghapusan tugas.

import React, { useReducer, useState } from 'react';

// Langkah 1: Definisikan keadaan awal
const initialState = { tasks: [] };

// Langkah 2: Buat fungsi reducer
function reducer(state, action) {
switch (action.type) {
case 'ADD_TASK':
return { tasks: [...state.tasks, action.payload] };
case 'REMOVE_TASK':
return { tasks: state.tasks.filter((task, index) => index !== action.payload) };
default:
return state;
}
}

// Langkah 3: Buat komponen TaskManager
function TaskManager() {
const [state, dispatch] = useReducer(reducer, initialState);
const [newTask, setNewTask] = useState('');

const handleAddTask = () => {
if (newTask.trim()) {
dispatch({ type: 'ADD_TASK', payload: newTask });
setNewTask('');
}
};

const handleRemoveTask = (index) => {
dispatch({ type: 'REMOVE_TASK', payload: index });
};

return (
<div>
<input
value={newTask}
onChange={(e) => setNewTask(e.target.value)}
placeholder="Masukkan tugas baru"
/>
<button onClick={handleAddTask}>Tambah Tugas</button>
<ul>
{state.tasks.map((task, index) => (
<li key={index}>
{task}
<button onClick={() => handleRemoveTask(index)}>Hapus</button>
</li>
))}
</ul>
</div>
);
}

export default TaskManager;

Dalam contoh yang lebih kompleks ini:

1. Keadaan awal kita sekarang memiliki array tugas.
2. Fungsi reducer menangani dua jenis aksi: 'ADD_TASK' dan 'REMOVE_TASK'.
3. Dalam komponen TaskManager, kita gunakan baik useReducer untuk mengelola tugas dan useState untuk mengelola field input.
4. Kita memiliki fungsi untuk menangani penambahan dan penghapusan tugas, yang mengirimkan aksi yang sesuai.
5. Kita render field input untuk tugas baru, tombol untuk menambah tugas, dan daftar tugas yang ada dengan tombol hapus.

Contoh ini menunjukkan bagaimana useReducer dapat membantu mengelola logika keadaan yang lebih kompleks dalam cara yang bersih dan terorganisir.

Tabel Metode

Berikut adalah tabel yang menggabungkan metode dan konsep utama yang kita pelajari:

Metode/Konsep	Deskripsi	Contoh
useReducer	Sebuah hook React untuk mengelola logika keadaan yang kompleks	const [state, dispatch] = useReducer(reducer, initialState);
reducer	Sebuah fungsi yang menentukan bagaimana keadaan harus berubah dalam respons terhadap aksi	function reducer(state, action) { ... }
dispatch	Sebuah fungsi yang digunakan untuk mengirimkan aksi untuk memperbarui keadaan	dispatch({ type: 'ADD_TASK', payload: newTask })
aksi	Sebuah objek yang menjelaskan perubahan yang harus dilakukan pada keadaan	{ type: 'INCREMENT' }
initialState	Keadaan awal aplikasi	const initialState = { count: 0 };

Ingat, belajar menggunakan useReducer secara efektif memerlukan latihan. Jangan frustasi jika itu tidak langsung berjalan – bahkan pengembang berpengalaman kadang-kadang memerlukan waktu untuk memahami konsep baru. Terus coding, terus eksperimen, dan yang paling penting, bersenang-senang! Sebelum Anda sadari, Anda akan mengelola keadaan kompleks seperti seorang pro. Selamat coding!

Credits: Image by storyset