Khi xây dựng các ứng dụng React đa nền (Web và React Native), việc chia sẻ logic trạng thái thường là một thách thức. Sử dụng Context API tích hợp sẵn của React cho từng nền tảng cộng với một kho lưu trữ nhẹ như Zustand cho phép bạn duy trì một nguồn sự thật duy nhất mà không cần các thư viện trung gian cồng kềnh. **Tại sao phương pháp này lại hiệu quả** - **Đồng bộ hóa tối thiểu**: Context API cung cấp một cơ chế khai báo để truyền dữ liệu xuống tree mà không cần prop drilling. Zustand cung cấp một cửa hàng duy nhất, có thể truy cập toàn cầu, hoạt động giống nhau trên cả hai nền tảng. - **Loại bỏ phụ thuộc phụ**: Bạn chỉ cần định nghĩa store một lần và tái sử dụng nó trong các nhà cung cấp cho web và native, giúp loại bỏ các hành động đồng bộ hóa riêng biệt. - **Dễ kiểm thử**: Các hook tùy chỉnh được xây dựng trên top của Zustand có thể được kiểm thử riêng biệt, trong khi Context vẫn giữ nguyên tính chất “props drilling” của React. **Các bước thực hiện** 1. **Tạo một store Zustand** – Tạo một tệp duy nhất (ví dụ: `sharedStore.js`): ``` import { create } from 'zustand'; const useSharedStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), decrement: () => set((state) => ({ count: state.count - 1 })), })); export default useSharedStore; ``` 2. **Xây dựng một hook tùy chỉnh bao bọc** – Điều này giúp việc truy cập store trở nên thuận tiện và có thể tái sử dụng: ``` import { useContext } from 'react'; import { SharedStoreContext } from './SharedStoreContext'; import useSharedStore from './sharedStore'; const useSharedState = () => { const store = useSharedStore(); const context = useContext(SharedStoreContext); // Sử dụng store từ context nếu có (React Native), nếu không sử dụng store trực tiếp (Web) return context ? context : store; }; export default useSharedState; ``` 3. **Thiết lập nhà cung cấp Context** – Tạo một component `SharedStoreProvider` cho từng nền tảng: ``` import React, { useState } from 'react'; import { SharedStoreContext } from './SharedStoreContext'; import useSharedStore from './sharedStore'; export const SharedStoreProvider = ({ children }) => { // Chỉ khởi tạo một lần cho React Native để tránh nhiều instance const [store] = useState(() => useSharedStore()); return ( <SharedStoreContext.Provider value={store}> {children} </SharedStoreContext.Provider> ); }; ``` 4. **Sử dụng hook trong component** – Dù bạn viết cho web hay native, bạn chỉ cần gọi `useSharedState()`: ``` import useSharedState from './useSharedState'; const Counter = () => { const { count, increment, decrement } = useSharedState(); return ( <div> <p>Số lần đếm: {count}</p> <button onClick={increment}>Tăng</button> <button onClick={decrement}>Giảm</button> </div> ); }; ``` **Lời khuyên thực tế** - **Đặt tên không gian tên** – Tiền tố cửa hàng của bạn (ví dụ: `appStore`) để tránh xung đột tên. - **Tối ưu hóa việc tái tạo** – Sử dụng `useMemo` khi khởi tạo store trên native để tránh việc tạo lại không cần thiết. - **Kiểm thử cả hai nền tảng** – Sử dụng React Testing Library cho web và React Native Testing Library cho native để đảm bảo hook hoạt động chính xác. Bằng cách kết hợp Context API với Zustand, bạn sẽ có được một giải pháp đơn giản, dễ bảo trì để đồng bộ hóa trạng thái giữa React Web và React Native mà không cần các thư viện trung gian phức tạp.