React ตัวอย่างการใช้งาน React Context and Reducer
React Context: ความหมายและวิธีใช้งาน
ปัญหา: ในบางครั้ง เราต้องการให้คอมโพเนนท์ที่อยู่บนสุดและล่างสุดของ stack เข้าถึง state เดียวกันได้ โดยหากไม่มี Context เราจำเป็นต้องส่ง state นั้นผ่าน “props” ผ่านแต่ละคอมโพเนนท์ที่อยู่ในชั้นที่ซ้อนกันไปเรื่อย ๆ ซึ่งเรียกว่า “prop drilling”
วิธีแก้ไข: วิธีแก้ไขคือการสร้าง Context ขึ้นมา
React Context คืออะไร: React Context เป็นวิธีหนึ่งในการจัดการ state แบบ global ในแอพพลิเคชัน React ซึ่งช่วยให้เราสามารถส่งข้อมูลข้าม component tree ได้โดยไม่ต้องใช้ prop drilling
ตัวอย่าง
|
1 2 |
import { useState, createContext } from "react"; const UserContext = createContext() |
การใช้งาน Context Provider ใน React
Context Provider มีบทบาทสำคัญในการให้ค่า state และฟังก์ชั่นต่างๆ แก่คอมโพเนนท์ลูกที่อยู่ใน tree โดยที่ไม่จำเป็นต้องผ่าน props ไปเรื่อยๆ
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import { useState, createContext } from "react"; const UserContext = createContext(); function Component1() { const [user, setUser] = useState("Jesse Hall"); return ( <UserContext.Provider value={user}> <h1>{`Hello ${user}!`}</h1> <Component2 /> </UserContext.Provider> ); } |
การใช้งาน Context Provider และ useContext Hook ใน React
Context Provider ใช้ในการส่งค่า state และฟังก์ชั่นต่างๆ ไปยังคอมโพเนนท์ลูกทั้งหมดใน tree และคอมโพเนนท์ลูกสามารถเข้าถึงค่าเหล่านี้ได้โดยใช้ useContext Hook
สรุป
การใช้ Context Provider ร่วมกับ useContext Hook ทำให้การจัดการ state ใน React ทำได้ง่ายขึ้นและลดความจำเป็นในการส่ง props ผ่านหลายๆ ชั้นของคอมโพเนนท์ ในการใช้งาน เราต้องสร้าง Context และ Provider จากนั้นห่อหุ้มคอมโพเนนท์ลูกด้วย Provider และใช้ useContext Hook ในคอมโพเนนท์ลูกเพื่อเข้าถึงค่า state และฟังก์ชั่นต่างๆ ที่ต้องการ
useReducer
การใช้งาน useReducer Hook ใน React
useReducer Hook มีความคล้ายคลึงกับ useState Hook แต่ช่วยให้เราสามารถจัดการกับ logic ของ state ที่ซับซ้อนได้มากขึ้น เหมาะสำหรับการจัดการหลายๆ ชิ้นส่วนของ state
คุณสมบัติของ useReducer:
- รับสองอาร์กิวเมนต์:
- reducer function: เป็นฟังก์ชันที่กำหนดว่า state ควรเปลี่ยนแปลงอย่างไรเมื่อมี action เกิดขึ้น
- initial state: ค่าเริ่มต้นของ state
- คืนค่า state ปัจจุบันและ dispatch method:
- state: ค่าปัจจุบันของ state
- dispatch: ฟังก์ชันที่ใช้ในการส่ง action เพื่อกระตุ้นให้ reducer function ทำงาน
ตัวอย่าง
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import { useReducer } from "react"; 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; } }; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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> ))} </> ); } export default Todos; |
สนใจจ้างพัฒนาระบบ เขียนระบบ
ทำเว็บไซต์ รับสอนเขียนโปรแกรม
inbox มาที่เพจ หรือติดต่อ 098-373-8651
ช่องทางการชำระเงิน
เงินสด หรือ e-banking
ธนาคารกสิกรไทย
เลขบัญชี : 0951168564
ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก
