Practice: Branch Dashboard, Redux focused

รายละเอียดสำหรับเรียนรู้ React ปี 2020-2023 โดยโค้ชพล ดูหลักสูตรได้ที่ https://www.nextflow.in.th/react-training

Practice: Branch Dashboard, Redux focused

2019-07-30_02-16-58

Setup Redux ขึ้นมาในโปรเจค

  1. สร้างโปรเจค template
  2. ดาวน์โหลดโปรเจคตัวอย่าง และคืนสภาพ
  3. สร้าง Actions
  4. สร้าง Reducer
  5. สร้าง Redux Store และเชื่อมกับ Reducer

เอา Redux มาใช้กับ Component แผนที่เพื่อแสดงสาขา

  1. ติดตั้ง Redux Store เข้ากับ Component
  2. เชื่อมต่อ MapBranch Component เข้ากับ Redux
  3. สร้าง Action Method ไว้ใช้ใน MapBranch
  4. ใช้ Action Method ใน MapBranch ผ่าน mapStateToDispatch
  5. จัดการ Payload ของ Action ใน Reducer
  6. จัดการ state object ใน Component ผ่าน mapStatetoProps

เอา Redux มาใช้กับแผนที่ และกราฟ เพื่อแสดงข้อมูลเฉพาะของสาขานั้น

  1. Action Method สำหรับส่งข้อมูลสาขาที่เลือกเข้า Reducer
  2. ใช้งาน Action method ใน MapBranch
  3. reducer เอาข้อมูลสาขาที่ถูกเลือก อัพเดตใน state object
  4. เชื่อมต่อ StatChart เข้า Redux และใช้งาน state object
  5. แปลงข้อมูลจาก state object เพื่อใช้งานใน Google Chart