บทนำ
เมื่อคุณสร้างแอปพลิเคชันที่มีหลาย component และข้อมูลที่เปลี่ยนแปลงอยู่เสมอ เช่น shopping cart, ระบบล็อกอิน, หรือฟอร์มซับซ้อน ปัญหาหนึ่งที่มักเจอคือการจัดการ state ให้แต่ละส่วนของแอปรู้ว่าเกิดอะไรขึ้น และต้องอัปเดตข้อมูลแบบไร้บั๊ก ซึ่งนี่เองคือที่มาของแนวคิด State Management
State Management คืออะไร?
State คือข้อมูลปัจจุบันของแอป เช่น ผู้ใช้ล็อกอินอยู่หรือไม่ จำนวนสินค้าที่อยู่ในตะกร้า เป็นต้น ส่วน State Management คือการจัดการข้อมูลเหล่านี้ให้สามารถอัปเดต แบ่งปัน และใช้งานร่วมกันระหว่าง component ต่าง ๆ ได้อย่างถูกต้อง
ตัวอย่างสถานการณ์ที่ต้องใช้ State Management
- ผู้ใช้ล็อกอิน และข้อมูลผู้ใช้นั้นต้องใช้หลายหน้า
- ตะกร้าสินค้าที่เพิ่มสินค้าหลายหน้า แต่แสดงยอดรวมที่มุมขวาบน
- Component A เปลี่ยนค่าบางอย่างที่ Component B ต้องรู้
เปรียบเทียบ Redux, Pinia, MobX
| คุณสมบัติ | Redux | Pinia | MobX |
|---|---|---|---|
| ใช้กับ Framework | React (หลัก) | Vue 3 | React, Vue |
| แนวคิดหลัก | Flux (Reducer + Action) | Store + Reactive State | Observer/Observable |
| โค้ดที่เขียน | เยอะ แต่ predictable | น้อยกว่า, ชัดเจน | ง่าย เรียบ |
| เหมาะกับใคร | ระบบใหญ่, ทีมใหญ่ | นักพัฒนา Vue ที่ต้องการ simplicity | ต้องการ simplicity + flexibility |
Redux คืออะไร?
Redux คือไลบรารียอดนิยมในการจัดการ state โดยใช้แนวคิด unidirectional data flow ผ่าน store, actions, และ reducers ทุกการเปลี่ยนแปลงต้องผ่าน action และ reducer เพื่อให้สามารถ debug ได้ง่าย
// Redux: reducer
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1;
default:
return state;
}
}
Pinia คืออะไร?
Pinia เป็น state management รุ่นใหม่ของ Vue ที่มาแทน Vuex (ตั้งแต่ Vue 3 เป็นต้นไป) ใช้งานง่ายขึ้น มี TypeScript support ดีกว่า และมี syntax ที่ใกล้เคียง Composition API
// Pinia Store
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
actions: {
increment() {
this.count++
}
}
})
MobX คืออะไร?
MobX ใช้แนวคิด reactive programming คล้าย Vue คือถ้ามีการเปลี่ยน state จะมีผลกับ component ที่ใช้งาน state นั้นทันทีโดยอัตโนมัติ ทำให้เขียนโค้ดได้น้อยและดูแลง่าย เหมาะกับระบบที่ต้องการ dynamic state เยอะ ๆ
// MobX
import { makeAutoObservable } from "mobx";
class Counter {
count = 0;
constructor() {
makeAutoObservable(this);
}
increment() {
this.count++;
}
}
ควรเลือกอะไรดี?
- Redux: เหมาะกับแอปที่ซับซ้อนและต้องการความสามารถในการ debug, time travel, และ audit state
- Pinia: เหมาะกับผู้ใช้ Vue โดยเฉพาะ Vue 3 ที่ต้องการ API ที่ทันสมัย
- MobX: เหมาะกับผู้ที่ชอบ reactive programming และไม่ต้องการ boilerplate
สรุป
State Management เป็นแนวคิดสำคัญสำหรับแอปพลิเคชันที่มีหลายหน้าหรือมี state ที่ต้องแชร์ข้าม component การเลือกใช้ Redux, Pinia หรือ MobX ควรขึ้นอยู่กับ framework ที่ใช้ ความซับซ้อนของระบบ และรูปแบบการเขียนโค้ดที่คุณถนัด
บทความนี้ใช้เวลาอ่านประมาณ 10 – 15 นาที เขียนโดยทีมงาน poolsawat.com