Các khái niệm cốt lõi của Redux là gì?

Question

Accepted Answer

**Redux** là một container state dễ đoán được xây dựng trên ba nguyên tắc cốt lõi: một **store duy nhất**, state **chỉ đọc** chỉ thay đổi qua **action**, và các **reducer thuần** tính ra state tiếp theo. Dữ liệu chảy một chiều, khiến các thay đổi dễ truy vết. ## Ba nguyên tắc ```text 1. Single source of truth — toàn bộ state của app nằm trong MỘT object store 2. State là chỉ đọc — bạn không bao giờ mutate nó; bạn DISPATCH action để thay đổi 3. Thay đổi qua reducer thuần — (state, action) => newState, không có side effect ``` ## Các thành phần và luồng ```js // STORE — giữ cây state duy nhất const store = configureStore({ reducer: rootReducer }); // ACTION — một object thuần mô tả điều đã xảy ra const action = { type: "counter/incremented", payload: 1 }; // REDUCER — hàm thuần: cho state + action, trả về state MỚI function counterReducer(state = { value: 0 }, action) { switch (action.type) { case "counter/incremented": return { ...state, value: state.value + action.payload }; // object mới default: return state; } } // DISPATCH — cách duy nhất để kích hoạt một thay đổi store.dispatch(action); // SELECT — đọc state store.getState().counter.value; ``` ## Chu trình ```text UI dispatch một ACTION → REDUCER tính STATE mới → STORE cập nhật → các component đã subscribe re-render → người dùng tương tác → dispatch action tiếp theo ``` Luồng một chiều nghiêm ngặt này nghĩa là mọi thay đổi state là kết quả của một action được dispatch và được xử lý bởi một hàm thuần — hoàn toàn dễ truy vết. ## Dùng nó trong React ```jsx import { useSelector, useDispatch } from "react-redux"; function Counter() { const count = useSelector(state => state.counter.value); // đọc const dispatch = useDispatch(); return ; // ghi } ``` ## Tại sao có các ràng buộc này? ```text Dễ đoán — mọi thay đổi là một action tường minh, được log Dễ debug — time-travel debugging, replay action (Redux DevTools) Dễ test — reducer thuần dễ unit test một cách tầm thường ``` (Lưu ý: Redux hiện đại dùng **Redux Toolkit**, giúp cắt giảm boilerplate đáng kể trong khi vẫn giữ các khái niệm này.) ## Tại sao điều này quan trọng Các khái niệm cốt lõi của Redux — store duy nhất, action, reducer thuần, luồng một chiều — khiến state của ứng dụng **dễ đoán và dễ truy vết**, đó là giá trị chính của nó với các app lớn. Hiểu store/action/reducer/dispatch/select là thiết yếu với nhiều codebase dùng Redux, và các nguyên tắc (cập nhật immutable, reducer thuần, luồng một chiều) lặp lại ở gần như mọi thư viện state. Đánh đổi là boilerplate, điều mà Redux Toolkit giải quyết trong khi vẫn giữ các nền tảng này.