Quản lý state trong ReactJS bằng Zustand – một thư viện nhỏ mà mạnh, giúp bạn thoát khỏi cơn ác mộng của Redux hay những đoạn code dài lê thê khi dùng Context API. Zustand nhẹ như lông hồng, dễ dùng như ăn kẹo, và không làm bạn khóc thét khi debug. Cùng khám phá nhé!
Zustand là gì?
Zustand (tiếng Đức nghĩa là “trạng thái”) là một thư viện quản lý state siêu gọn nhẹ, được tạo ra bởi đội ngũ pmnd.rs. Nó không bắt bạn viết boilerplate code dài dòng, không ép bạn học 1001 khái niệm như reducer, action, dispatch. Chỉ cần một store, vài dòng code, là bạn đã có state ngon lành để xài khắp app.
Tại sao chọn Zustand?
Nhẹ: File chỉ vài KB, không làm app bạn ì ạch.
Dễ: Viết code như kiểu “tôi muốn gì thì tôi lấy đó”, không vòng vo.
Linh hoạt: Dùng được cả trong component, ngoài component, thậm chí trong hàm util.
Hài hước: Không phải debug mà khóc như Redux đâu nhé!
Cài đặt nhanh gọn
npm install zustandXong, giờ vào việc thôi!
Ví dụ: Quản lý giỏ hàng
Giả sử bạn đang làm một app bán hàng, cần quản lý giỏ hàng.
1.Tạo store với Zustand
// store/cartStore.js
import { create } from 'zustand';
const useCartStore = create((set) => ({
cart: [], // State ban đầu: giỏ hàng rỗng
addToCart: (item) => set((state) => ({
cart: [...state.cart, item], // Thêm món vào giỏ
})),
removeFromCart: (id) => set((state) => ({
cart: state.cart.filter((item) => item.id !== id), // Xóa món khỏi giỏ
})),
clearCart: () => set({ cart: [] }), // Xóa hết giỏ, ví dụ khi thanh toán xong
}));
export default useCartStore;
2. Dùng trong component
// components/Cart.js
import useCartStore from '../store/cartStore';
function Cart() {
const { cart, addToCart, removeFromCart, clearCart } = useCartStore();
const newItem = { id: 1, name: 'Áo phông xịn', price: 200000 };
return (
< div >
< h2 >Giỏ hàng của bạn ({cart.length} món)</ h2 >
< ul >
{cart.map((item) => (
< li key={item.id} >
{item.name} - {item.price}đ
< button onClick={() => removeFromCart(item.id)}>Xóa</ button >
</ li >
))}
</ ul >
< button onClick={() => addToCart(newItem)}>Thêm áo phông</ button >
< button onClick={clearCart}>Xóa hết (mua xong rồi!)</ button >
); }
export default Cart;
</ div >
create: Tạo một store với state và các hàm để thay đổi state.
set: Hàm cập nhật state, kiểu như setState nhưng mạnh hơn, cho phép bạn merge state cũ với state mới.
Dùng hook useCartStore: Lấy state và hàm ra xài, không cần Provider lằng nhằng như Context.
Khi nào nên dùng Zustand?
Dự án nhỏ: Nhanh, gọn, không cần cấu trúc phức tạp.
Dự án lớn: Dễ mở rộng, không sợ rối code.
Khi bạn lười: Không muốn viết boilerplate mà vẫn muốn state ngon lành.
Kết luận
Zustand là “người bạn thân” của React developer: nhẹ nhàng, dễ thương, không làm bạn đau đầu. Thay vì vật lộn với Redux hay Context, hãy thử Zustand – đảm bảo bạn sẽ cười tươi khi code. Chúc bạn code vui, state mượt!
