สร้าง 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. เข้าถึงค่า redux state จากภายใน component

Redux: dispatch object

  1. กำหนดประเภทของ Action (Action Type)
  2. ทำการ dispatch Action เข้า redux store จาก component ที่ต้องการ
  3. กำหนดให้ reducer จัดการ Action และ payload