React hook: 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