Khi phát triển ứng dụng web React và React Native song song, việc đồng bộ hóa logic nghiệp vụ, dữ liệu người dùng và trạng thái UI có thể trở nên phức tạp. Cách tiếp cận phổ biến là sao chép mã giữa hai nền tảng, nhưng điều này nhanh chóng dẫn đến sự lạc đề và lỗi không nhất quán. Một giải pháp hiệu quả là tạo một lớp trạng thái trung tâm tận dụng một store nhẹ như Zustand kết hợp với Context API của React, cho phép bạn định nghĩa một nguồn chân lý duy nhất mà cả hai ứng dụng đều có thể truy cập. **Tại sao chọn Zustand?** Zustand được thiết kế để đơn giản—không cần middleware, không cần boilerplate. Nó sử dụng các hook dựa trên store, giúp việc truy xuất và cập nhật trạng thái trở nên trực quan. Vì store không phụ thuộc vào React, bạn có thể dễ dàng nhập nó vào cả hai môi trường React, điều này đặc biệt hữu ích khi một component cần đọc trạng thái mà không cần render lại. **Kết hợp Context API** Mặc dù Zustand lưu trữ dữ liệu, nhưng Context API cung cấp cơ chế truyền dữ liệu xuống component. Bằng cách bao bọc ứng dụng trong một nhà cung cấp Context chứa store Zustand, bạn có thể cung cấp store cho cây component mà không cần truyền props xuống nhiều cấp. Điều này giúp việc truy cập trạng thái trở nên đơn giản: `const myStore = useContext(StoreContext);` **Tạo custom hooks** Để sử dụng store một cách sạch sẽ, hãy tạo custom hooks cho từng phần trạng thái. Ví dụ: ``` // useUserProfile.ts export const useUserProfile = () => { const store = useContext(StoreContext); return { user: store.user, setUser: store.setUser, isLoading: store.isLoading, }; }; ``` Custom hook này có thể được nhập vào bất kỳ component nào trên cả hai nền tảng, mang lại giao diện giống nhau và loại bỏ nhu cầu truy cập trực tiếp store. **Những lợi ích chính** - **Đồng bộ hóa code**: Các thay đổi trong store sẽ tự động được phản ánh trên cả hai nền tảng, loại bỏ nhu cầu đồng bộ hóa dữ liệu thủ công. - **Dễ kiểm thử**: Các hook có thể được kiểm tra riêng biệt, trong khi store vẫn có thể được kiểm tra thông qua API của nó. - **Hiệu suất**: Vì Zustand chỉ lưu trữ những gì bạn yêu cầu, nên việc render lại không cần thiết được giảm thiểu. - **Khả năng mở rộng**: Khi ứng dụng phát triển, bạn có thể chia store thành nhiều store nhỏ hơn, mỗi store quản lý một phần trạng thái khác nhau. **Hướng dẫn triển khai** 1. Tạo store Zustand (ví dụ: `useAuthStore.ts`). 2. Bao bọc store trong một Context provider (`AuthProvider`) và cung cấp nó cho ứng dụng con. 3. Xây dựng các custom hook chuyên biệt để đọc các slice trạng thái. 4. Thay thế việc truyền props cục bộ bằng các hook này trong các component trên cả web và native. Bằng cách áp dụng phương pháp này, bạn sẽ có một cơ sở mã sạch, dễ bảo trì, hoạt động liền mạch trên web và thiết bị di động, đồng thời giảm đáng kể lượng công việc trùng lặp.