State Management: Từ useState đến Redux Toolkit

1. Giới Thiệu Chung

Quản lý trạng thái (state management) là một trong những vấn đề cốt lõi khi phát triển ứng dụng với React. Trạng thái có thể là một biến đếm đơn giản, danh sách sản phẩm, thông tin người dùng hay cả giỏ hàng trong một ứng dụng thương mại điện tử.

Từ useState cho đến các thư viện mạnh mẽ như Redux Toolkit, mỗi phương pháp quản lý trạng thái đều có vai trò và phạm vi sử dụng riêng. Việc lựa chọn đúng công cụ không chỉ giúp code sạch mà còn giúp đội ngũ phát triển dễ bảo trì và mở rộng dự án.

2. Từ useState đến Redux: Lộ Trình Quản Lý State

2.1. useState – Khởi đầu đơn giản

Hook useState là phương pháp quản lý state cục bộ trong từng component.

Ưu điểm:

• Dễ hiểu, nhanh chóng.
• Phù hợp với các component nhỏ hoặc trung bình.

Nhược điểm:

• Không chia sẻ được state giữa các component nếu không truyền props.

2.2. Prop Drilling – Khi state phải “đi qua trung gian”

Khi một component cha cần truyền state cho nhiều component con sâu bên trong, ta phải truyền qua nhiều cấp — gọi là prop drilling.

Nhược điểm:

• Code rối.
• Khó bảo trì, đặc biệt khi component lồng nhau phức tạp.

2.3. Context API – Chia sẻ state toàn cục đơn giản

React Context giúp chia sẻ state giữa các component mà không cần prop drilling.

Ưu điểm:

• Truyền dữ liệu toàn app dễ dàng (user, theme, language…).
• Không cần thư viện ngoài.

Nhược điểm:

• Không phù hợp với state phức tạp, nhiều thao tác cập nhật.
• Mỗi lần context thay đổi, tất cả component tiêu thụ bị re-render.

2.4. Redux Toolkit – Quản lý state chuyên nghiệp

Redux Toolkit là phiên bản hiện đại, rút gọn và tối ưu của Redux truyền thống.

Ưu điểm:

• Tổ chức state tập trung, rõ ràng.
• Debug dễ với Redux DevTools.
• Phù hợp với ứng dụng lớn và logic phức tạp.

Nhược điểm:

• Cấu hình ban đầu phức tạp hơn so với useState.
• Overkill với ứng dụng đơn giản.

3. Khi Nào Nên Dùng Redux? Khi Nào Là Overkill?

4. Ứng Dụng Thực Tế: E-Commerce – Quản Lý Trạng Thái Bằng Redux Toolkit

4.1. Các state cần quản lý:

• User (đăng nhập, thông tin cá nhân)
• Cart (sản phẩm trong giỏ, số lượng)
• Wishlist
• Order (lịch sử mua hàng)
• Product filter (lọc, tìm kiếm sản phẩm)

4.2. Cấu trúc slice trong Redux Toolkit:

plaintextCopyEdit/store
  /slices
    userSlice.js
    cartSlice.js
    productSlice.js

4.3. Ví dụ: cartSlice.js

jsCopyEditimport { createSlice } from '@reduxjs/toolkit';

const cartSlice = createSlice({
  name: 'cart',
  initialState: {
    items: [],
  },
  reducers: {
    addToCart: (state, action) => {
      state.items.push(action.payload);
    },
    removeFromCart: (state, action) => {
      state.items = state.items.filter(item => item.id !== action.payload);
    }
  }
});

export const { addToCart, removeFromCart } = cartSlice.actions;
export default cartSlice.reducer;

4.4. Cách sử dụng trong component:

jsCopyEditconst dispatch = useDispatch();
const cart = useSelector(state => state.cart.items);

<button onClick={() => dispatch(addToCart(product))}>Thêm vào giỏ</button>

5. Tổng Kết

State management không có công cụ nào là “tốt nhất” cho mọi tình huống. Điều quan trọng là chọn đúng công cụ cho đúng bài toán:

• useState: nhỏ, nhanh, đơn giản.
• Context API: chia sẻ state toàn app, không quá phức tạp.
• Redux Toolkit: khi app lớn, cần tổ chức code chuẩn hóa, dễ debug và mở rộng.

“Hiểu rõ trạng thái ứng dụng – giống như giữ được mạch máu của hệ thống luôn thông suốt.”

Một lựa chọn đúng ngay từ đầu sẽ giúp bạn tiết kiệm rất nhiều thời gian bảo trì, debug và cải tiến trong tương lai.