Web Development
React hook: useReducer แบบสั้นๆ
เราใช้ useState ในการจัดการ State ง่ายๆ แต่ถ้าเราต้องจัดการอะไรที่ซับซ้อนกว่านั้น อาจจะต้องใช้ useReducer เข้ามาช่วย ส่วนวิธีการใช้งานจะเป็นอย่างไรนั้น มาดูกันเลย

useReducer เป็น hook ที่ใช้จัดการ state ที่ซับซ้อนใน functional component คล้ายกับ useState แต่จะมีการรับ reducer function และ initial state มาด้วย
นี่คือตัวอย่างการใช้ useReducer ในการจัดการ shopping cart

import React, { useReducer } from "react";
function cartReducer(state, action) {
switch (action.type) {
case "add":
return [...state, action.payload];
case "remove":
return state.filter((item) => item.id !== action.payload.id);
default:
return state;
}
}
function ShoppingCart() {
const [cart, dispatch] = useReducer(cartReducer, []);
const addItem = (item) => {
dispatch({ type: "add", payload: item });
};
const removeItem = (item) => {
dispatch({ type: "remove", payload: item });
};
return (
<div>
<h2>Shopping Cart</h2>
<ul>
{cart.map((item) => (
<li key={item.id}>
{item.name} - ${item.price}
<button onClick={() => removeItem(item)}>Remove</button>
</li>
))}
</ul>
<button onClick={() => addItem({ id: 1, name: "Item 1", price: 9.99 })}>
Add Item
</button>
</div>
);
}
ในตัวอย่าง จะเห็นว่าเราได้สร้าง cartReducer
function ที่รับ state และ action และ return state ใหม่ตาม action type แล้วเราก็ใช้ useReducer hook ในการจัดการ state ของ cart ด้วย cartReducer
function
เราก็ได้ตัวแปรมารับฟังก์ชัน addItem
และ removeItem
ที่ dispatch action ไปยัง cartReducer
เพื่อเพิ่มหรือลบรายการจาก state ของ cart
สุดท้ายเราก็ render รายการใน cart ด้วย map ใน JavaScript และสร้างปุ่มเพื่อเพิ่มหรือลบรายการ และเมื่อปุ่มถูกคลิก ฟังก์ชัน addItem
หรือ removeItem
ก็จะถูกเรียกใช้เพื่ออัปเดต state ของ cart ด้วย dispatch function ที่ได้จาก useReducer hook
คลิกเพื่อแสดงความคิดเห็น