Redux เป็นคอนเทนเนอร์สถานะที่คาดเดาได้ซึ่งสร้างจากสามหลักการหลัก: ร้านค้าเดียว สถานะอ่านอย่างเดียว ที่เปลี่ยนแปลงผ่าน actions เท่านั้น และ pure reducers ที่คำนวณสถานะถัดไป ข้อมูลไหลไปในทิศทางเดียว ทำให้การเปลี่ยนแปลงสามารถติดตามได้
1. Single source of truth — the whole app's state lives in ONE store object
2. State is read-only — you never mutate it; you DISPATCH actions to change it
3. Changes via pure reducers — (state, action) => newState, no side effects
// STORE — holds the single state tree
const store = configureStore({ reducer: rootReducer });
// ACTION — a plain object describing what happened
const action = { type: "counter/incremented", payload: 1 };
// REDUCER — pure function: given state + action, returns NEW state
function counterReducer(state = { value: 0 }, action) {
switch (action.type) {
case "counter/incremented":
return { ...state, value: state.value + action.payload }; // new object
default:
return state;
}
}
// DISPATCH — the only way to trigger a change
store.dispatch(action);
// SELECT — read state
store.getState().counter.value;
UI dispatches an ACTION → REDUCER computes new STATE → STORE updates →
subscribed components re-render → user interacts → dispatches the next action
การไหลไปทางเดียวที่เข้มงวดนี้หมายความว่าการเปลี่ยนแปลงสถานะทุกครั้งเป็นผลจาก action ที่ถูกส่ง ซึ่งประมวลผลโดยฟังก์ชันบริสุทธิ์ — สามารถติดตามได้อย่างเต็มที่
import { useSelector, useDispatch } from "react-redux";
function Counter() {
const count = useSelector(state => state.counter.value); // read
const dispatch = useDispatch();
return <button onClick={() => dispatch(increment())}>{count}</button>; // write
}
Predictability — every change is an explicit, logged action
Debuggability — time-travel debugging, action replay (Redux DevTools)
Testability — pure reducers are trivial to unit test
(หมายเหตุ: Redux สมัยใหม่ใช้ Redux Toolkit ซึ่งลดจำนวน boilerplate อย่างมากในขณะเดียวกันก็รักษาแนวคิดเหล่านี้ไว้)
แนวคิดหลักของ Redux — ร้านค้าเดียว actions pure reducers การไหลไปทางเดียว — ทำให้สถานะของแอปพลิเคชัน คาดเดาได้และติดตามได้ ซึ่งเป็นมูลค่าหลักของ Redux สำหรับแอปพลิเคชันขนาดใหญ่
การเข้าใจ store/action/reducer/dispatch/select เป็นสิ่งจำเป็นสำหรับ codebase จำนวนมากที่ใช้ Redux และหลักการต่างๆ (immutable updates pure reducers unidirectional flow) เกิดขึ้นซ้ำแล้วซ้ำเล่าในไลบรารีสถานะเกือบทั้งหมด
การแลกเปลี่ยนคือ boilerplate ซึ่ง Redux Toolkit แก้ไขในขณะเดียวกันก็รักษาพื้นฐานเหล่านี้ไว้