ReactJS - Menggunakan useReducer

Hai, para pemrogram yang sedang belajar! Hari ini, kita akan mengemban perjalanan yang menarik ke dunia hook React, khususnya fokus pada hook useReducer yang kuat. Jangan khawatir jika Anda baru dalam programming – saya akan memandu Anda langkah demi langkah, sama seperti yang saya lakukan untuk ribuan murid dalam tahunajaran saya. Mari kita masuk ke dalamnya!

Apa itu useReducer?

Sebelum kita melompat ke detailnya, mari kita pahami apa yang dimaksudkan oleh useReducer. Bayangkan Anda sedang bermain permainan video di mana karakter Anda memiliki berbagai keadaan – kesehatan, kekuatan, dan kecepatan. Selama Anda bermain, keadaan ini berubah berdasarkan tindakan Anda. useReducer mirip dengan mesin permainan yang mengelola perubahan keadaan ini berdasarkan aturan khusus.

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

Tanda tangan hook useReducer

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

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

mari kitauraikan 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 tindakan untuk memperbarui keadaan kita.
• reducer: Ini adalah fungsi yang menentukan bagaimana keadaan kita harus berubah dalam tanggapan terhadap tindakan.
• 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.

Menerapkan hook reducer

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

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 kitauraikan ini langkah demi langkah:

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

Saat Anda mengklik tombol '+', itu mengirimkan tindakan '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 kasus yang lebih kompleks. Bayangkan kita sedang membuat 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. initialState kita sekarang memiliki array tugas.
2. Fungsi reducer menangani dua jenis tindakan: 'ADD_TASK' dan 'REMOVE_TASK'.
3. Dalam komponen TaskManager, kita gunakan baik useReducer untuk mengelola tugas dan useState untuk mengelola kolom input.
4. Kita memiliki fungsi untuk menangani penambahan dan penghapusan tugas, yang mengirimkan tindakan yang sesuai.
5. Kita render kolom 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 bahas:

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

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

Credits: Image by storyset