Cách Zustand thay thế Redux và thoát cảnh setup mệt mỏi

Nhớ lại những ngày "đánh vật" với Redux

Ai làm React chắc cũng từng trải qua cái thời mà muốn tạo một cái state đơn giản cũng phải viết cả mớ file. Nào là action, reducer, rồi store, dispatch loạn xạ. Mỗi lần sửa logic là phải nhảy qua nhảy lại 3-4 file khác nhau tìm lỗi. Rõ ràng chúng ta chỉ muốn lưu cái trạng thái "đăng nhập", mà code phình to như đang viết hệ điều hành vậy. Nhờ cách React Query dẹp loạn useEffect, chúng ta đã đỡ mệt mỏi phần fetch data, nhưng quản lý global state vẫn là một cục nợ to đùng. Redux tốt thật, nhưng nó quá cồng kềnh cho đa số dự án vừa và nhỏ.

Zustand xuất hiện như một "đấng cứu thế"

Thay vì ép bạn phải theo một đống quy tắc cứng ngắc, Zustand cho phép bạn tạo store chỉ với một cái hook duy nhất. Đúng vậy, bạn không nghe nhầm đâu. Mọi thứ bạn cần đều nằm gọn trong vài dòng code thế này:

import { create } from 'zustand'

const useStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

Không cần Provider bọc ngoài App, không cần boilerplate lằng nhằng. Bạn cứ import hook này vào bất kỳ component nào và gọi ra dùng luôn. Gọn gàng, dễ hiểu và cực kỳ thanh lịch. Thậm chí nếu so với việc dùng React 19 Actions, việc quản lý state nội bộ bằng Zustand còn mang lại cảm giác chủ động và mượt mà hơn nhiều.

Sức mạnh ngầm bên dưới vẻ ngoài đơn giản

Đừng để cú pháp ngắn gọn đánh lừa, Zustand xử lý hiệu năng cực kỳ thông minh. Nó chỉ re-render những component nào thực sự cần thiết, giúp ứng dụng tránh được tình trạng giật lag thường thấy ở Context API.

Hơn nữa, Zustand làm việc vô cùng ăn ý với TypeScript. Khỏi lo chuyện kiểu dữ liệu bị undefined một cách vô cớ. Nếu bạn đã từng dùng Zod để ép xác dữ liệu, thì khi kết hợp cùng Zustand có type chặt chẽ sẽ tạo ra một bộ khung vững chắc cho Frontend của bạn. Để tìm hiểu sâu hơn về cơ chế thú vị này, bạn có thể ngó qua tài liệu chính thức của Zustand.

Bắt đầu chuyển đổi ngay hôm nay

Bạn không cần phải đập đi xây lại toàn bộ dự án để dùng thử thư viện này. Cứ giữ nguyên phần Redux cũ nếu muốn, và bắt đầu dùng Zustand cho một tính năng mới thôi. Nó đủ nhỏ nhẹ để sống chung với các công cụ khác mà không gây xung đột.

1. Cài đặt nhanh qua npm: npm install zustand
2. Tạo store đầu tiên ở một file riêng biệt.
3. Import vào component và tận hưởng sự nhàn hạ.

Nếu bạn muốn trang bị thêm nhiều "vũ khí" xịn xò khác cho hành trình làm nghề, cứ ghé qua trang chủ của DIA DEMY nhé. Giờ thì, liệu Zustand có phải là bến đỗ cuối cùng của state management, hay chúng ta lại sắp đón thêm một "làn sóng" mới mang tên Signals từ các framework đối thủ?