Expo Workshop 2 : ใช้งาน Context (CRUD) Expo บน browser ใช้ useReducer ร่วมกับ useContext

ตัวอย่างนี้
เป็นการแสดงรายชื่อผู้ใช้ โดยสามารถเพิ่มข้อมูล แก้ไข และลบข้อมูลผู้ใช้ได้ ซึ่งข้อมูลผู้ใช้จะเก็บไว้ที่ DataProvider คอมโพเนนต์ เพื่อส่งผ่านข้อมูลไปยังคอมโพเนนน์ต่างๆ ได้ง่าย และแก้ไขค่า state ที่อยู่ใน Provider จะแก้ไขผ่านทาง useReducer ฮุก โดยทุกครั้งที่แก้ไขข้อมูล จะใช้วิธีส่ง action ออบเจ็กต์ ผ่านฟังก์ชัน dispatch() ซึ่งอาจดูยุ่งยาก แต่เมื่อแอพพลิเคชันมีขนาดใหญ่ขึ้น การใช้ useReducer ถือว่าเป็นทางเลือกที่นักพัฒนาส่วนใหญ่เลือกใช้ค่ะ

ขั้นตอนที่ 1 สร้าง reducer สำหรับจัดการกับ state

1.1 ตั้งชื่อ Project ชื่อ exapp2-crud- ตามด้วยชื่อของนักศึกษา ตัวอย่างจะใช้เป็น exapp2-crud-waraporn
(Capture หน้าจอ)



1.2 สร้างโฟลเดอร์ชื่อ context
(Capture หน้าจอ)



1.3 สร้างไฟล์ชื่อ reducer.js ในโฟลเดอร์ context
(Capture หน้าจอ)



1.4 แก้ไขไฟล์ reducer.js ดังนี้ (สามารถ copy code ได้จากไดร์ฟที่โฟลเดอร์ใบงาน)
(Capture หน้าจอ)



ขั้นตอนที่ 2 กำหนด DataProvider คอมโพเนนต์

เนื่องจากต้องใช้ Context เพื่อจัดการกับการส่งข้อมูลไปยังคอมโพเนนต์ต่างๆ ภายในแอพพลิเคชัน เราจึงต้องกำหนด Context และเตรียมข้อมูลที่ต้องการแชร์ไว้ภายใน DataProvider คอมโพเนนต์ ดังนี้

2.1 สร้างไฟล์ชื่อ DataProvider.js ในโฟลเดอร์ context
(Capture หน้าจอ)



2.2 แก้ไขไฟล์ DataProvider.js ดังนี้ line ที่ 6 ให้เปลี่ยนเป็นชื่อนักศึกษา และ line ที่ 7 ให้เปลี่ยนเป็นชื่อเพื่อน (สามารถ copy code ได้จากไดร์ฟที่โฟลเดอร์ใบงาน)
(Capture หน้าจอ)



ขั้นตอนที่ 3 กำหนด UsersList คอมโพเนนต์

ใช้ UsersList คอมโพเนนต์ แสดงรายชื่อผู้ใช้ทั้งหมด โดยมีปุ่มสำหรับเพิ่มผู้ใช้ใหม่ (ตัวอย่างนี้ จะใช้วิธีสุ่มรหัส และรายชื่อผู้ใช้) ซึ่งข้อมูลผู้ใช้ที่นำมาแสดงใน UsersList คอมโพเนนต์ ได้จาก DataProvider (พร๊อพเพอร์ตี้ allUsers)

3.1 ที่โฟลเดอร์ชื่อ conponents และสร้างไฟล์ชื่อ UsersList.js ในโฟลเดอร์ conponents
(Capture หน้าจอ)



3.2 แก้ไขไฟล์ UsersList.js ดังนี้ (สามารถ copy code ได้จากไดร์ฟที่โฟลเดอร์ใบงาน)
(Capture หน้าจอ)



ขั้นตอนที่ 4 กำหนด User คอมโพเนนต์

ใช้ User คอมโพเนนต์ แสดงรายชื่อผู้ใช้แต่ละคน โดยมีปุ่มสำหรับแก้ไขชื่อผู้ใช้ (ตัวอย่างนี้ ใช้วิธีสุ่มรายชื่อผู้ใช้) และปุ่มสำหรับลบผู้ใช้ ซึ่งฟังก์ชันสำหรับแก้ไขข้อมูลผู้ใช้ ได้จาก DataContext (พร๊อพเพอร์ตี้ dispatch)

4.1 สร้างไฟล์ชื่อ User.js ในโฟลเดอร์ conponents
(Capture หน้าจอ)



4.2 แก้ไขไฟล์ User.js ดังนี้ (สามารถ copy code ได้จากไดร์ฟที่โฟลเดอร์ใบงาน)
(Capture หน้าจอ)



กรณีที่มีแจ้ง error ให้คลิกที่ Add dependency แถบแดงด้านล่าง error จะหายไป



ขั้นตอนที่ 5 กำหนดขอบเขตของ Context

หลังจากสร้าง DataContext และได้กำหนด DataProvider คอมโพเนนต์ สำหรับเก็บ state ที่จะใช้แชร์เรียบร้อยแล้ว ขั้นตอนสุดท้าย คือการกำหนดข้อมูลที่ต้องการแชร์

ถ้าต้องการใช้ข้อมูลจาก DataProvider ทั้งแอพพลิเคชัน เราต้องนำ DataProvider คอมโพเนนต์ครอบเนื้อหาทั้งหมดของ App คอมโพเนนต์ ดังนี้

5.1 แก้ไขไฟล์ App.js ซึ่งเป็นคอมโพเนนต์หลักของแอพพลิเคชัน ดังนี้ (สามารถ copy code ได้จากไดร์ฟที่โฟลเดอร์ใบงาน)
(Capture หน้าจอ)



5.2 Download project โดยคลิกที่สัญลักษณ์ Download as zip จะได้โฟลเดอร์ชื่อ exapp2-crud-waraporn ให้นำโฟลเดอร์ดังกล่าว ส่งในไดร์ฟงาน



ขั้นตอนที่ 6 อัดคลิปหน้าจอสาธิตการใช้ การเพิ่ม การแก้ไข และการลบ ตามตัวอย่างคลิปนี้ ตั้งชื่อเป็น ExpoWorkshop5 และส่งคลิปนี้บนไดรฟ์