Redux là gì? Quản lý state toàn cục trong React

10 component thì quản lý state không khó. Nhưng khi ứng dụng lớn lên — 50, 100 component — bạn sẽ gặp vấn đề quen thuộc: phải truyền props qua 4-5 tầng component chỉ để một cái ở dưới cùng dùng được.

Đó là props drilling. Và Redux sinh ra để giải quyết đúng vấn đề đó.

Redux là gì? Vấn đề nó giải quyết

Redux là thư viện quản lý state cho JavaScript, được Dan Abramov tạo ra năm 2015. Ý tưởng cốt lõi: gom hết state vào một nơi duy nhất gọi là Store — và bất kỳ component nào cũng có thể đọc từ đó.

// Props drilling — khó maintain
function App() {
  const [user, setUser] = useState({ name: "Nguyễn Văn An" });
  return <Header user={user} />;
}

function Header({ user }) {
  return <Nav user={user} />;  // Header không dùng, vẫn phải nhận
}

function Nav({ user }) {
  return <UserMenu user={user} />;  // Nav cũng vậy
}

function UserMenu({ user }) {
  return <p>Xin chào, {user.name}!</p>;  // Chỉ đây là dùng thật sự
}

Ba nguyên tắc cơ bản của Redux

1. Single source of truth: Toàn bộ state ứng dụng nằm trong một Store duy nhất
2. State is read-only: Muốn thay đổi state, phải dispatch một Action
3. Changes via pure functions: Reducer xử lý thay đổi là pure function

Redux Toolkit — Cách viết Redux hiện đại

npm install @reduxjs/toolkit react-redux

Tạo Slice với createSlice

import { createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    }
  }
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer

Tạo Store với configureStore

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'

export const store = configureStore({
  reducer: {
    counter: counterReducer
  }
})

Bọc ứng dụng bằng Provider

import { Provider } from 'react-redux'
import { store } from './app/store'

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
)

Dùng Redux trong component React

import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement, incrementByAmount } from './counterSlice'

function Counter() {
  const count = useSelector((state) => state.counter.value)
  const dispatch = useDispatch()

  return (
    <div>
      <h2>Bộ đếm: {count}</h2>
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(incrementByAmount(10))}>+10</button>
    </div>
  )
}

Redux vs Context API — Khi nào dùng cái nào?

Tiêu chí	Redux (RTK)	Context API
Quy mô phù hợp	Trung đến lớn	Nhỏ đến trung
Debug tool	Redux DevTools (rất mạnh)	Browser DevTools
Hiệu năng	Tối ưu sẵn	Cần chú ý re-render
Async (API call)	Redux Thunk / RTK Query	Tự xử lý
Learning curve	Trung đến cao	Thấp

Dùng Redux khi: nhiều component cùng đọc/ghi một state, logic state phức tạp, cần Redux DevTools.

Context API đủ dùng khi: theme, ngôn ngữ, ứng dụng nhỏ.

Ngoài ra, Zustand là lựa chọn nhẹ nhàng hơn Redux nhưng mạnh hơn Context, đang được nhiều team chọn năm 2026.

Kết luận

Redux có learning curve nhưng khi đã nắm được luồng Action → Reducer → Store → Component, mọi thứ rất logic và dễ maintain.

Bắt đầu bằng cách clone một dự án counter đơn giản với Redux Toolkit, chạy thử, mở Redux DevTools xem state thay đổi theo thời gian thực.

Muốn ôn lại React? Đọc bài React là gì? Hướng dẫn học React cho người mới.