Bereaksi useReducer
Kait
Kait useReducer
mirip dengan useState
Kait.
Ini memungkinkan logika status kustom.
Jika Anda menemukan diri Anda melacak beberapa bagian negara yang mengandalkan logika kompleks, useReducer
mungkin berguna.
Sintaksis
Kait useReducer menerima dua argumen.
useReducer(<reducer>, <initialState>)
Fungsi tersebut reducer
berisi logika status kustom Anda dan initialState
dapat berupa nilai sederhana tetapi umumnya akan berisi objek.
useReducer
Hook mengembalikan arus dan state
metode dispatch
.
Berikut adalah contoh useReducer
dalam aplikasi penghitung:
Contoh:
import { useReducer } from "react";
import ReactDOM from "react-dom";
const initialTodos = [
{
id: 1,
title: "Todo 1",
complete: false,
},
{
id: 2,
title: "Todo 2",
complete: false,
},
];
const reducer = (state, action) => {
switch (action.type) {
case "COMPLETE":
return state.map((todo) => {
if (todo.id === action.id) {
return { ...todo, complete: !todo.complete };
} else {
return todo;
}
});
default:
return state;
}
};
function Todos() {
const [todos, dispatch] = useReducer(reducer, initialTodos);
const handleComplete = (todo) => {
dispatch({ type: "COMPLETE", id: todo.id });
};
return (
<>
{todos.map((todo) => (
<div key={todo.id}>
<label>
<input
type="checkbox"
checked={todo.complete}
onChange={() => handleComplete(todo)}
/>
{todo.title}
</label>
</div>
))}
</>
);
}
ReactDOM.render(<Todos />, document.getElementById('root'));
Ini hanya logika untuk melacak status lengkap todo.
Semua logika untuk menambah, menghapus, dan menyelesaikan todo dapat dimuat dalam satu
useReducer
Hook dengan menambahkan lebih banyak tindakan.