ตอบสนองuseReducer
ตะขอ
useReducer
ตะขอคล้ายกับuseState
ตะขอ
อนุญาตให้ใช้ตรรกะสถานะที่กำหนดเอง
หากคุณพบว่าตัวเองกำลังติดตามสถานะหลายๆ ส่วนที่ใช้ตรรกะที่ซับซ้อนuseReducer
อาจเป็นประโยชน์
ไวยากรณ์
useReducer Hook ยอมรับสองอาร์กิวเมนต์
useReducer(<reducer>, <initialState>)
ฟังก์ชันreducer
นี้ประกอบด้วยตรรกะสถานะที่กำหนดเองของคุณ และinitialState
สามารถเป็นค่าธรรมดาได้ แต่โดยทั่วไปจะมีอ็อบเจ็กต์
useReducer
Hook คืนค่าปัจจุบันและstate
วิธีdispatch
การ
นี่คือตัวอย่างuseReducer
ในแอปเคาน์เตอร์:
ตัวอย่าง:
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'));
นี่เป็นเพียงตรรกะในการติดตามสถานะที่สมบูรณ์ของสิ่งที่ต้องทำ
ตรรกะทั้งหมดในการเพิ่ม ลบ และทำสิ่งที่ต้องทำให้เสร็จสิ้นสามารถอยู่ภายใน
useReducer
Hook เดียวโดยเพิ่มการดำเนินการเพิ่มเติม