<blockquote>Tiếp tục từ phần trước, phần 2 của chuỗi bài viết sẽ tập trung vào việc quản lý trạng thái ứng dụng sao cho hiệu quả và tối ưu hiệu suất nhất.</blockquote>
Như chúng ta đã biết, lý do chọn Nextjs để phát triển ứng dụng web là vì những ưu điểm về hiệu năng và server side mà Nextjs cung cấp tốt cho SEO ( Search Engine Optimization ). Do đó, mọi giải pháp công nghệ mà chúng ta lựa chọn phải đảm bảo và phát huy ưu điểm này, tránh việc tích hợp quá nhiều thư viện, tuy giúp việc code dễ dàng và nhanh chóng hơn, nhưng vô tình làm tăng dung lượng tải trang và làm chậm ứng dụng.
Những yêu cầu cần được giải quyết trong bài hướng dẫn này là:
- Sử dụng giải pháp quản lý state global cho guest sao cho đảm bảo các component vẫn giữ được trạng thái Server Component ban đầu, để sử dụng hiệu quả tối đa các tính năng cache dữ liệu của Nextjs. ( Những thư viện cần sử dụng Provider như Redux, Context API sẽ không làm được yêu cầu này. )
- Đối với Admin, cần giải pháp quản lý state global mạnh mẽ và dễ mở rộng, giải quyết nhiều bài toán về dữ liệu phức tạp và số lượng lớn.
Bằng cách sử dụng <a href="https://github.com/pmndrs/zustand" target="_blank">Zustand</a> cho trang khách (guest) và Redux, Redux Toolkit, Redux Saga cho trang quản trị (admin). Chúng ta có thể giải quyết êm đẹp những yêu cầu trên, hãy cùng tôi bắt đầu nhé
Quản Lý Trạng Thái Với Zustand Cho Khách (Guest)
Zustand là một thư viện quản lý trạng thái với kích thước nhỏ và cú pháp đơn giản. Nó rất phù hợp để sử dụng cho các trạng thái nhẹ và không cần phức tạp. Để sử dụng Zustand cho khách (guest), bạn làm như sau:
Cài đặt Zustand:
npm install zustand
Tạo một store Zustand cho khách:
<pre>// cartStore.js</pre>
<pre>import { create } from 'zustand';</pre>
<pre>import { createJSONStorage, persist } from 'zustand/middleware';</pre>
<pre>interface IProduct {</pre>
<pre>	id: number;</pre>
<pre>	name: string;</pre>
<pre>	image: string;</pre>
<pre>	imageHover: string;</pre>
<pre>	price: number;</pre>
<pre>}</pre>
<pre>type CartStoreType = {</pre>
<pre>	carts: IProduct[];</pre>
<pre>	addToCart: (product: any) =&gt; void;</pre>
<pre>	removeToCart: (productId: number) =&gt; void;</pre>
<pre>};</pre>
<pre>export const useCartStore = create(</pre>
<pre>	persist&lt;CartStoreType&gt;(</pre>
<pre>		(set, get) =&gt; ({</pre>
<pre>			carts: [],</pre>
<pre>			profile: null,</pre>
<pre>			addToCart: (item: any) =&gt;</pre>
<pre>				set((state) =&gt; ({ carts: [item, ...state.carts] })),</pre>
<pre>			removeToCart: (productId: number) =&gt; {</pre>
<pre>				set((state) =&gt; ({</pre>
<pre>					carts: state.carts.filter(</pre>
<pre>						(item) =&gt; Number(item.id) !== Number(productId)</pre>
<pre>					),</pre>
<pre>				}));</pre>
<pre>			},</pre>
<pre>		}),</pre>
<pre>		{</pre>
<pre>			name: 'cart-storage', // unique name</pre>
<pre>			storage: createJSONStorage(() =&gt; sessionStorage), // (optional) by default, 'localStorage' is used</pre>
<pre>		}</pre>
<pre>	)</pre>
<pre>);</pre>
Trong đó, create là hàm tạo mới 1 store của Zunstand, persist và storage dùng để lưu dữ liệu vào local storage của web, giúp dữ liệu không bị mất đi khi người dùng đóng ứng dụng.
Sử dụng store Zustand trong component ở guest:
<pre>// AddCartButton.tsx</pre>
<pre>'use client';</pre>
<pre>import { useCartStore } from '@/store/cart/cart.store';</pre>
<pre>import React from 'react';</pre>
<pre>const AddCartButton: React.FC&lt;{ product: any }&gt; = ({ product }) =&gt; {</pre>
<pre>	const addToCart = useCartStore((state) =&gt; state.addToCart);</pre>
<pre>	const onAddToCart = () =&gt; {</pre>
<pre>		addToCart(product);</pre>
<pre>	};</pre>
<pre>	return (</pre>
<pre>		&lt;div className="absolute z-30 delay-150 -bottom-20 left-0 right-0 flex items-center justify-center group-hover:bottom-10 transition-all duration-200 ease-linear"&gt;</pre>
<pre>			&lt;button</pre>
<pre>				className="hover:bg-[#DF4141] py-[10px] px-5 text-sm hover:text-white bg-white transition-all duration-200"</pre>
<pre>				onClick={onAddToCart}</pre>
<pre>			&gt;</pre>
<pre>				Add to cart</pre>
<pre>			&lt;/button&gt;</pre>
<pre>		&lt;/div&gt;</pre>
<pre>	);</pre>
<pre>};</pre>
<pre>export default AddCartButton;</pre>
Component trên dùng để thêm 1 sản phẩm vào giỏ hàng bằng cách bấm vào button Add to Cart
<pre>'use client';</pre>
<pre>import { CartIcon } from '@/assets/icons/';</pre>
<pre>import { useCartStore } from '@/store/cart/cart.store';</pre>
<pre>import React from 'react';</pre>
<pre>const CartStore: React.FC = () =&gt; {</pre>
<pre>	const { carts } = useCartStore((state) =&gt; state);</pre>
<pre>	return (</pre>
<pre>		&lt;div className=""&gt;</pre>
<pre>			&lt;div className="relative cursor-pointer"&gt;</pre>
<pre>				&lt;CartIcon /&gt;</pre>
<pre>				&lt;p className="top-[-10px] right-[-10px] absolute z-10 font-semibold text-sm"&gt;</pre>
<pre>					{carts.length}</pre>
<pre>				&lt;/p&gt;</pre>
<pre>			&lt;/div&gt;</pre>
<pre>		&lt;/div&gt;</pre>
<pre>	);</pre>
<pre>};</pre>
<pre>export default CartStore;</pre>
Component này nằm ở Header Guest, và hiển thị số sản phẩm được thêm vào giỏ

Tiếp tục từ phần trước, phần 2 của chuỗi bài viết sẽ tập trung vào việc quản lý trạng thái ứng dụng sao cho hiệu quả và tối ưu hiệu suất nhất.

Xây dựng Nền Tảng Next.js Hiệu Quả cho Team Leader ( Phần 2 - Quản lý trạng thái )