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