สร้าง Counter App ใช้งานร่วมกับ Redux

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

สร้าง Counter App ใช้งานร่วมกับ Redux

React Component

  1. สร้างโปรเจค และติดตั้ง module ที่จำเป็น
  2. สร้าง Component ส่วนแสดงจำนวน Counter
  3. สร้าง Component ส่วนปุ่มเพิ่มจำนวน Counter
  4. แสดงทั้ง 2 component ไว้ใน App component

Redux: consume object

  1. Setup Redux
  2. Setup Redux store ให้ App component
  3. เชื่อม Component เข้ากับ Redux store
  4. ใช้ redux state จาก reducer ใน component ที่ต้องการ

Redux: dispatch object

  1. กำหนดประเภทของ Action (Action Type)
  2. กำหนด dispatch function ให้ Component เรียกใช้ผ่าน Props
  3. กำหนดให้ reducer จัดการ Action และ payload

เฉลย