Menggunakan hook useReducer

Kapan kita menggunakan hook useReducer? Kalau dari pengalaman pribadi dan dokumentasi dari Reactjs , ini dilakukan untuk penanganan state yang cukup kompleks. Kalau hanya menggunakan 1-2 state, ya lebih baik cukup menggunakan useState saja. Lebih detail nya bisa dilihat disini (Kapan Menggunakan useState atau useReducer)

Format penulisan

const [state, dispatch] = useReducer(fungsi_reducer, initialArg, initialfunction?)

Parameter :

  • fungsi_reducer : Function yang berisi hal-hal untuk memanipulasi/update state
  • initialArg : Berisi initial state yang hanya dijalankan pada saat pertama kali komponen di render.
  • initialFunction : Hal ini bersifat opsional. Function ini akan mengembalikan nilai untuk Initial State. Jika initialFunction ini tidak digunakan, maka initial state didapat dari initialArg

Return

  • State saat ini
  • Dispatch Function berisi action-action yang mengizinkan kita untuk update state dan akan men trigger untuk di render ulang komponen nya .

Langsung saja pada contoh nya

import { useReducer } from "react";

function reducer(state, action) {
	switch (action.type) {
		case "tambah_usia": {
			return {
				name: state.name,
				age: state.age + 1,
			};
		}
		case "ganti_nama": {
			return {
				name: action.NamaBaru,
				age: state.age,
			};
		}
	}
	throw Error("Unknown action: " + action.type);
}

const initialState = { name: "Chandra", age: 46 };

export default function Form() {
	const [state, dispatch] = useReducer(reducer, initialState);

	function handleButtonClick() {
		dispatch({ type: "tambah_usia" });
	}

	function handleInputChange(e) {
		dispatch({
			type: "ganti_nama",
			NamaBaru: e.target.value,
		});
	}

	return (
		<>
			<input value={state.name} onChange={handleInputChange} />
			<button onClick={handleButtonClick}>Tambah usianya</button>
			<p>
				Hello, {state.name}. Umur Anda {state.age}.
			</p>
		</>
	);
}

Leave a Comment

Your email address will not be published. Required fields are marked *