0Pricing
React Academy · บทเรียน

Context + Reducer: ตัวจัดเก็บสถานะแบบง่าย

ผสาน Context + useReducer เพื่อสร้างตัวจัดเก็บสถานะขนาดเล็ก โดย Provider เปิดให้ใช้สถานะและ dispatch ผ่านฮุกแบบกำหนดเอง

Context + Reducer: ตัวจัดเก็บสถานะแบบง่าย เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน

เหตุใดจึงใช้บริบทและรีดิวเซอร์

เป้าหมาย: รวมตรรกะของสถานะไว้ในตัวให้บริการ (บริบท) + รีดิวเซอร์ องค์ประกอบลูกอ่านค่าผ่านฮุกกำหนดเองขนาดเล็ก ทำให้ไม่ต้องส่งพร็อปต่อทอดและการอัปเดตคาดเดาได้

ขั้นตอนการออกแบบ

รูปแบบ:

  • สร้างบริบท
  • ภายในตัวให้บริการ: useReducer(สถานะ, การดำเนินการ)
  • ส่งมอบ {สถานะ, การส่งคำสั่ง}
  • สร้างฮุกแบบ useCounter() ที่เรียกใช้ useContext

สาธิต: ตัวครอบตัวนับ

CounterProvider ขนาดเล็กจะเปิดให้ใช้สถานะและการส่งคำสั่ง องค์ประกอบลูกใช้ useCounter() เพื่ออ่านและอัปเดตค่า


<div id="root"></div>

คำแนะนำเกี่ยวกับการดำเนินการและส่วนติดต่อการใช้งาน

คำแนะนำ:

  • ทำให้การดำเนินการมีขนาดเล็ก (INC, DEC, RESET)
  • วางรีดิวเซอร์ไว้ร่วมกับตัวให้บริการ
  • ส่งออกเฉพาะฮุกกำหนดเอง เพื่อให้ผู้ใช้ฮุกใช้งานได้เรียบง่าย

สาธิต: ตัวครอบรายการสิ่งที่ต้องทำ

TodoProvider ขนาดเล็กแสดงให้เห็นว่าหลายฟิลด์อัปเดตได้อย่างคาดเดาได้ด้วยรีดิวเซอร์เดียวและส่วนติดต่อฮุกที่เรียบง่าย


<div id="root"></div>

ข้อควรระวังและเคล็ดลับ

ข้อควรระวัง:

  • ลืมครอบองค์ประกอบลูกด้วยตัวให้บริการ
  • ใส่ออบเจ็กต์ขนาดใหญ่ไว้ในบริบท ควรส่งเฉพาะสิ่งที่จำเป็น
  • เปลี่ยนแปลงสถานะโดยตรงในรีดิวเซอร์ ควรส่งคืนออบเจ็กต์ใหม่เสมอ

ตรวจสอบรูปแบบตัวครอบ

รูปแบบทั่วไปสำหรับสร้างตัวครอบสถานะแบบง่ายด้วยบริบทและ useReducer คืออะไร

สรุป

สรุป: บริบทช่วยให้เข้าถึงค่าได้ ส่วน useReducer จัดการการเปลี่ยนสถานะ ส่งออกฮุก useXxx ขนาดเล็กเพื่ออ่าน {สถานะ, การส่งคำสั่ง} และทำให้ผู้ใช้ฮุกใช้งานได้เรียบง่าย

คำถามที่พบบ่อย

บทเรียน “Context + Reducer: ตัวจัดเก็บสถานะแบบง่าย” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Context + Reducer: ตัวจัดเก็บสถานะแบบง่าย” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Context + Reducer: ตัวจัดเก็บสถานะแบบง่าย”

ผสาน Context + useReducer เพื่อสร้างตัวจัดเก็บสถานะขนาดเล็ก โดย Provider เปิดให้ใช้สถานะและ dispatch ผ่านฮุกแบบกำหนดเอง คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน

บทเรียน “Context + Reducer: ตัวจัดเก็บสถานะแบบง่าย” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม

ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. พื้นฐาน Context และการหลีกเลี่ยงการส่งพร็อพต่อทอด
  2. พื้นฐาน useReducer และรูปแบบแอ็กชัน
  3. Context + Reducer: ตัวจัดเก็บสถานะแบบง่าย
← กลับไปที่ React Academy