มาลอง React และ Redux กัน

☕️ สนับสนุนช่องเราด้วยการสมัครสมาชิกช่องทางนี้ได้เลย
   / @mikelopster  

ลองไมค์ สัปดาห์นี้เรามาพูดถึง Redux 1 ใน state management ชื่อดังประจำ React อีก 1 ตัวว่ามันคืออะไร มีหลักการทำงานอย่างไรบ้าง พร้อมกับตัวอย่างการใช้งาน Redux และ Redux toolkits ว่าเหมือนหรือแตกต่างกันยังไงบ้าง มาเรียนรู้กันผ่านลองไมค์ในวันนี้กันครับ

หัวข้อนี้เราจะพูดถึง
1. รู้จักกับ Redux และ 3 keyword หลัก action, store, reducer
2. ตัวอย่างการ implement ร่วมกันกับ React ทั้งแบบไม่ต่อ API และ ต่อ API
3. เพิ่มเติมเรื่อง Redux Toolkits และ Redux Devtools ว่าช่วยในการพัฒนา Redux อย่างไรได้บ้าง

หัวข้อ
00:00 แนะนำหัวข้อ
1:10 Redux คืออะไร
05:08 การทำงานระหว่าง action / store / reducer
15:04 ลองเขียนตัวอย่าง Redux ผ่านตัวอย่าง Counter กัน
22:00 เริ่มทำ User Management ผ่าน Redux
25:59 เพิ่ม Router เข้า project (แบ่งหน้า List, Create, Edit)
29:38 เพิ่มส่วน UI Component เข้าไปผ่าน tailwind
33:50 สร้าง store ของ user และดึงข้อมูลผ่าน store (useSelector)
38:21 ทดลอง dispatch action และได้ข้อมูล user (useDispatch)
42:06 เพิ่มการดึง API ผ่าน action creator (ผ่าน middleware redux-thunk)
46:10 เพิ่ม CRUD action / reducer ให้ครบใน User Management
48:43 เพิ่มการยิง dispatch หน้า List (Delete), Create, Edit ให้ครบ
53:20 แนะนำ Redux Toolkits
56:17 ปรับ code ส่วน action / reducer ให้เป็น userSlice แทน (รวมผ่าน Toolkits)
1:01:37 แนะนำ Redux Devtools สำหรับการ debug เพิ่มเติม
1:03:10 สรุปทั้งหมดระหว่าง Redux และ Redux Toolkits

สามารถอ่าน Blog เพิ่มเติมได้ที่
https://mikelopster.dev/posts/react-r...

ใครมีข้อสงสัยเพิ่มเติม มาพูดคุยแลกเปลี่ยนความรู้กันได้ที่
Facebook page:   / mikelopster.dev   กันได้เลย

แปะพิกัดของที่ผมใช้
https://shope.ee/8A54c8cfkf ของที่ตั้งอยู่ด้านหลัง
https://shope.ee/6fI75UuLEM osmo pocket 3
https://shope.ee/4VDcVixCW9 ไมค์ shure
https://shope.ee/6pbXI6d5xG กล้องวงจรปิด

Enjoy ครับ 😘