## Quản lý trạng thái trong React với Zustand Quản lý trạng thái trong React có thể trở nên lộn xộn nếu bạn không chọn công cụ phù hợp. Bạn bắt đầu với `useState`, sau đó nâng lên `useContext`, và đột nhiên ứng dụng của bạn cảm giác như đang tham gia vào một buổi biểu diễn xiếc với nhiều props. Đó là lúc **Zustand** xuất hiện, đơn giản và sạch sẽ, giống như người bạn không bao giờ làm phức tạp hóa kế hoạch ăn tối. Hãy cùng khám phá cách quản lý một **danh sách người dùng** trên nhiều component bằng Zustand. ## Tại sao chọn Zustand? Zustand là một thư viện quản lý trạng thái **nhỏ nhưng mạnh mẽ**. Khác với Redux (cảm giác như làm thuế), Zustand không có các nghi thức phức tạp, chỉ là những hàm đơn giản. ### Lợi ích chính: - Nhẹ và nhanh 🏎️ - Không cần reducers, actions hay nghi thức 🎉 - Tương thích tuyệt vời với React hooks 👌 ## Yêu cầu cơ bản Để chạy ứng dụng nhỏ này, bạn chỉ cần: - React (v18+) - Node & npm đã được cài đặt - Gói `zustand` đã được cài đặt ## Thiết lập Store Chúng ta sẽ tạo một store cho người dùng. ```bash npm install zustand ``` Bây giờ, hãy định nghĩa một store: ```javascript // store/userStore.js import { create } from 'zustand'; const useUserStore = create((set) => ({ users: [], addUser: (newUser) => set((state) => ({ users: [...state.users, newUser], })), removeUser: (id) => set((state) => ({ users: state.users.filter(user => user.id !== id), })), })); export default useUserStore; ``` ### Giải thích: - `users` giữ danh sách người dùng của chúng ta. - `addUser` cho phép chúng ta thêm một người dùng mới. - `removeUser` giúp chúng ta xóa người dùng 👋. ## Hiển thị danh sách người dùng Chúng ta cần một component để **hiển thị** người dùng. ```javascript // components/UserList.js import React from 'react'; import useUserStore from '../store/userStore'; function UserList() { const users = useUserStore((state) => state.users); const removeUser = useUserStore((state) => state.removeUser); return (

Danh sách người dùng

{user.name}

); } export default UserList; ``` ### Giải thích: Ở đây, chúng ta lấy danh sách người dùng trực tiếp từ store bằng cách sử dụng `useUserStore`. Không cần phải truyền props qua lại. Không còn nước mắt. ## Thêm người dùng mới Chúng ta cũng cần một form (hoặc một nút) để thêm người dùng. ```javascript // components/AddUser.js import React, { useState } from 'react'; import useUserStore from '../store/userStore'; function AddUser() { const [name, setName] = useState(''); const addUser = useUserStore((state) => state.addUser); const handleSubmit = (e) => { e.preventDefault(); if (!name.trim()) return; addUser({ id: Date.now(), name }); setName(''); }; return ( ); } export default AddUser; ``` ### Giải thích: Bây giờ bạn đã có một cách để thực sự *thêm* người dùng mới. ## Kết hợp mọi thứ lại Cuối cùng, hãy sử dụng cả hai component trong `App` của bạn. ```javascript // App.js import React from 'react'; import AddUser from './components/AddUser'; import UserList from './components/UserList'; function App() { return (

Quản lý người dùng với Zustand 🐻

); } export default App; ``` ## Những suy nghĩ cuối cùng Zustand giúp quản lý trạng thái trở nên dễ dàng hơn. Thay vì phải đối phó với reducers và dispatchers (xin chào, Redux), bạn chỉ cần **gọi hàm**. Mã của bạn vẫn dễ đọc, và trạng thái của bạn vẫn được tập trung. ### Thực hành tốt nhất - Sử dụng Zustand cho các ứng dụng nhỏ và vừa, nơi bạn cần quản lý trạng thái một cách đơn giản mà không cần phải thiết lập phức tạp. - Tạo cấu trúc thư mục rõ ràng cho các component và store để dễ quản lý. ### Những cạm bẫy thường gặp - Quản lý trạng thái quá nhiều thông tin trong một store, có thể dẫn đến khó khăn trong việc bảo trì. - Không sử dụng các hàm quản lý trạng thái một cách hợp lý, có thể dẫn đến việc không tối ưu hiệu suất. ### Mẹo hiệu suất - Theo dõi số lượng render của component để tối ưu hóa việc sử dụng Zustand. - Sử dụng memoization cho các component lớn để giảm thiểu các render không cần thiết. ### Giải quyết sự cố - Nếu không thấy thay đổi trên UI, hãy kiểm tra xem bạn đã gọi đúng hàm từ store chưa. - Đảm bảo rằng các component đang lắng nghe đúng phần trạng thái từ store. ### Câu hỏi thường gặp (FAQ) **1. Zustand có thay thế Redux không?** - Zustand là một lựa chọn nhẹ nhàng hơn cho việc quản lý trạng thái, phù hợp với các ứng dụng không quá phức tạp. **2. Tôi có thể kết hợp Zustand với Redux không?** - Có thể, nhưng nên sử dụng một cách hợp lý để tránh làm phức tạp ứng dụng của bạn. **3. Làm thế nào để tôi có thể mở rộng Zustand cho một ứng dụng lớn?** - Bạn có thể chia nhỏ store thành nhiều store con để quản lý các phần khác nhau của trạng thái một cách hiệu quả. Cuối cùng, hãy thử nghiệm với Zustand trong dự án của bạn, và bạn sẽ thấy sự khác biệt trong cách quản lý trạng thái dễ dàng hơn nhiều!

Bài viết về chủ đề#zustand

Tổng hợp các bài viết về #zustand

Quản lý trạng thái đơn giản với Zustand trong React#react#zustand#state

Chủ đề phổ biến

Quản lý trạng thái đơn giản với Zustand trong React