1. 17:54 11/10/2026
**Giới thiệu**
Khi xây dựng ứng dụng đa nền tảng bằng React, việc duy trì đồng bộ trạng thái giữa phiên bản web và phiên bản di động là một thách thức phổ biến. Sử dụng các cơ chế quản lý trạng thái riêng biệt có thể dẫn đến sự không nhất quán, tăng dung lượng mã và khó bảo trì. Trong bài viết này, chúng ta sẽ khám phá cách kết hợp Context API của React với thư viện Zustand để tạo một giải pháp quản lý trạng thái chung, hoạt động trơn tru trên cả React Web và React Native.
**Tại sao cần quản lý trạng thái chung?**
- **Tính đồng bộ:** Người dùng nên có trải nghiệm giống nhau dù trên trình duyệt hay thiết bị di động.
- **Chia sẻ mã:** Logic nghiệp vụ được lưu trữ ở một nơi duy nhất giúp giảm lỗi và rút ngắn thời gian phát triển.
- **Hiệu suất:** Tránh sao chép dữ liệu và cập nhật không cần thiết giúp cải thiện hiệu suất ứng dụng.
**Sử dụng Context API trong React Web và React Native**
Context API cung cấp một cách tiếp cận đơn giản để truyền dữ liệu mà không cần prop drilling. Vì API này hoạt động giống nhau trên cả hai nền tảng nên bạn có thể tạo một Context duy nhất cho các giá trị chung (ví dụ: thông tin người dùng, chủ đề giao diện, cờ tải).
```js
// sharedContext.js
import { createContext, useContext } from 'react';
const SharedContext = createContext(undefined);
export const SharedProvider = ({ children }) => {
const sharedState = { user: null, theme: 'light' };
return (
<SharedContext.Provider value={sharedState}>
{children}
</SharedContext.Provider>
);
};
export const useShared = () => {
const ctx = useContext(SharedContext);
if (!ctx) throw new Error('useShared phải được sử dụng trong SharedProvider');
return ctx;
};
```
Bởi vì Context API không phụ thuộc vào nền tảng, nên cùng một tệp có thể được nhập vào cả hai dự án web và di động.
**Tích hợp Zustand cho cả hai nền tảng**
Zustand nổi tiếng với cú pháp đơn giản và hoạt động trên cả hai môi trường. Bằng cách định nghĩa một store Zustand duy nhất cho các trạng thái mà bạn muốn chia sẻ, bạn có thể truy cập store đó từ cả component web và component native.
```js
// sharedStore.js
import create from 'zustand';
export const useSharedStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count - 1 })),
}));
```
Cả React Web và React Native đều có thể import `useSharedStore` và sử dụng nó mà không cần bao bọc bổ sung.
**Ưu điểm của giải pháp kết hợp**
- **Giao diện người dùng đồng bộ:** Các component có thể sử dụng `useShared` và `useSharedStore` để hiển thị dữ liệu chung.
- **Dễ kiểm tra:** Store Zustand dễ mô phỏng trong khi Context API cung cấp một giá trị mặc định rõ ràng.
- **Khả năng mở rộng:** Khi ứng dụng phát triển, bạn có thể di chuyển các trạng thái phức tạp hơn vào store Zustand trong khi vẫn giữ các giá trị tĩnh đơn giản trong Context.
**Các bước thực hiện**
1. **Tạo thư viện chung** (có thể là một gói npm riêng) chứa Context và store Zustand.
2. **Bao bọc ứng dụng web** bằng `SharedProvider` trong tệp chính (ví dụ: `src/index.js`).
3. **Bao bọc ứng dụng di động** bằng cùng một `SharedProvider` trong tệp chính của React Native (`App.js`).
4. **Import các hook** vào component trên cả hai nền tảng và sử dụng chúng như các hook thông thường.
5. **Viết các test** cho store Zustand (sử dụng Jest) và kiểm tra Context API thông qua React Testing Library.
**Mẹo và lưu ý**
- **Đặt tên không gian tên rõ ràng** (ví dụ: `shared/*`) để tránh xung đột tên import.
- **Tối ưu hóa việc render** bằng cách sử dụng `React.memo` hoặc `useMemo` cho các component con chỉ sử dụng một phần trạng thái.
- **Xử lý lỗi trạng thái thiếu** bằng cách cung cấp giá trị dự phòng trong provider.
- **Kiểm tra trên cả hai nền tảng** để đảm bảo rằng các hook hoạt động giống nhau trên web và thiết bị di động.
**Kết luận**
Bằng cách kết hợp Context API và Zustand, bạn có thể tạo một giải pháp quản lý trạng thái chung, hoạt động trên cả React Web và React Native. Cách tiếp cận này giúp mã nguồn sạch sẽ, dễ bảo trì và mang lại trải nghiệm người dùng đồng bộ trên các nền tảng.