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

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.

npm install zustand

Bây giờ, hãy định nghĩa một store:

// 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.

// 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 (
    <div>
      <h2>Danh sách người dùng</h2>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name} 
            <button onClick={() => removeUser(user.id)}>❌</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

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.

// 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 (
    <form onSubmit={handleSubmit}>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Nhập tên người dùng"
      />
      <button type="submit">Thêm người dùng</button>
    </form>
  );
}

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.

// App.js
import React from 'react';
import AddUser from './components/AddUser';
import UserList from './components/UserList';

function App() {
  return (
    <div>
      <h1>Quản lý người dùng với Zustand 🐻</h1>
      <AddUser />
      <UserList />
    </div>
  );
}

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!