Hiểu về Zustand

Quản lý state thường mang lại cảm giác quá phức tạp.

Bạn biết cách sử dụng React useState. Bạn biết cách truyền props. Bạn biết cách đưa state lên cấp cao hơn.

Nhưng mọi thứ sẽ trở nên hỗn loạn khi ứng dụng của bạn lớn dần. Bạn bắt đầu truyền dữ liệu qua những component không hề cần đến nó. Đây chính là prop drilling. Nó khiến mã nguồn của bạn trở nên lộn xộn và khó bảo trì.

Zustand giải quyết vấn đề này. Nó cung cấp cho ứng dụng của bạn một state dùng chung nằm bên ngoài các React component.

Hãy nghĩ theo cách này:

Không có Zustand: Component A truyền props cho B, B truyền props cho C, và C truyền props cho D.

Có Zustand: Mọi component đều giao tiếp trực tiếp với một store trung tâm. Không cần trung gian. Không còn prop drilling.

Một Zustand store bao gồm hai thành phần:

  • State: Dữ liệu của bạn.
  • Actions: Các hàm dùng để thay đổi dữ liệu.

Chỉ đơn giản vậy thôi.

Zustand hoạt động nhanh vì nó chỉ re-render những component sử dụng đúng phần dữ liệu vừa thay đổi.

Nếu bạn muốn dữ liệu vẫn tồn tại sau khi tải lại trang, hãy sử dụng localStorage. Vì localStorage chỉ lưu trữ chuỗi, bạn phải sử dụng JSON.stringify để lưu các object và JSON.parse để đọc chúng.

Dưới đây là một cách đơn giản để cấu trúc một auth store:

  • Lưu trữ user và token trong localStorage.
  • Sử dụng một hàm login để cập nhật store và bộ nhớ trình duyệt.
  • Sử dụng một hàm logout để xóa cả hai.

Nó so với Redux như thế nào?

Redux yêu cầu dispatchers và reducers. Nó đòi hỏi rất nhiều mã boilerplate. Zustand cho phép bạn gọi trực tiếp một hàm. Nó ít gây áp lực về tư duy và ít phải thiết lập hơn.

Các lỗi phổ biến cần tránh:

  • Quên trả về một object trong hàm create. Hãy sử dụng dấu ngoặc đơn bao quanh object của bạn.
  • Sử dụng dấu chấm phẩy bên trong state object. Hãy sử dụng dấu phẩy thay thế.
  • Parse dữ liệu vốn đã là một chuỗi.

Các thư viện quản lý state không phải là để quản lý state. Chúng là để quản lý sự phức tạp.

Đừng cố gắng ghi nhớ mọi API. Hãy bắt đầu nhìn vào vấn đề mà công cụ đó cố gắng giải quyết. Khi bạn hiểu được vấn đề, công cụ đó sẽ trở nên hợp lý.

Nguồn: https://dev.to/chinwuba_jeffrey/understanding-zustand-2g11