Chủ Đề Động Trong React Với Context API: Đa Thương Hiệu 🎨

Khi làm việc trên một dự án tại công ty của tôi, tôi đã gặp phải một thách thức thực sự: chúng tôi cần triển khai cùng một ứng dụng cho nhiều thương hiệu, mỗi thương hiệu lại có chủ đề và hướng dẫn thiết kế riêng. Việc truyền props cho từng component trở nên rối rắm, và duy trì các mã nguồn khác nhau cho mỗi thương hiệu là không bền vững. Đây là lúc tôi khám phá React Context API cho việc thay đổi chủ đề động tại thời gian thực, và nó đã thay đổi quy trình làm việc của chúng tôi.

🔹 1. Tại Sao Cần Chủ Đề Đa Thương Hiệu?

• Tránh prop drilling giữa các component
• Hỗ trợ thay đổi chủ đề động tại thời gian thực
• Tập trung quản lý chủ đề để đảm bảo tính nhất quán
• Giúp ứng dụng mở rộng cho nhiều khách hàng hoặc thương hiệu

Hãy tưởng tượng rằng bạn đang triển khai cùng một dự án cho 5 thương hiệu khác nhau. Mỗi thương hiệu đều có màu sắc chính và phụ, font chữ, và phong cách riêng. Bạn không muốn phải viết lại các component mỗi khi có thương hiệu mới xuất hiện. Context API giải quyết vấn đề này một cách thanh lịch.

🔹 2. Định Nghĩa Chủ Đề Thương Hiệu 🏗️

const defaultThemes = {
  brandA: { primary: '#1E90FF', secondary: '#F0F8FF', text: '#000' },
  brandB: { primary: '#FF6347', secondary: '#FFF0F5', text: '#222' },
  brandC: { primary: '#32CD32', secondary: '#F5FFFA', text: '#111' },
};

• Mỗi chủ đề chứa màu sắc, font chữ, và các yếu tố thiết kế khác.
• Có thể dễ dàng mở rộng với các thuộc tính bổ sung như kiểu nút, border-radius, v.v.

🔹 3. Nhà Cung Cấp Ngữ Cảnh Chủ Đề 🌍

import React, { createContext, useState, useEffect } from 'react';

export const ThemeContext = createContext();

export const ThemeProvider = ({ children, initialBrand = 'brandA', fetchTheme }) => {
  const [currentBrand, setCurrentBrand] = useState(initialBrand);
  const [theme, setTheme] = useState({});

  useEffect(() => {
    async function loadTheme() {
      const fetchedTheme = fetchTheme ? await fetchTheme(currentBrand) : defaultThemes[currentBrand];
      setTheme(fetchedTheme);
      const root = document.documentElement;
      Object.entries(fetchedTheme).forEach(([key, value]) => {
        root.style.setProperty(`--${key}-color`, value);
      });
    }
    loadTheme();
  }, [currentBrand, fetchTheme]);

  const setBrandTheme = (brand) => setCurrentBrand(brand);

  return (
    <ThemeContext.Provider value={{ currentBrand, setBrandTheme, theme }}>
      {children}
    </ThemeContext.Provider>
  );
};

• Hỗ trợ lấy dữ liệu chủ đề tại thời gian thực thông qua API hoặc hàm cục bộ.
• Áp dụng biến CSS toàn cầu cho việc tạo kiểu đồng nhất giữa các component.

🔹 4. Sử Dụng Chủ Đề Trong Các Component 🌈

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

const Button = () => {
  const { currentBrand, setBrandTheme } = useContext(ThemeContext);

  const handleBrandChange = (e) => setBrandTheme(e.target.value);

  return (
    <div>
      <button style={{ backgroundColor: 'var(--primary-color)', color: 'var(--text-color)', padding: '10px 20px', border: 'none', borderRadius: '5px' }}>
        Bấm Tôi
      </button>

      <select value={currentBrand} onChange={handleBrandChange} style={{ marginLeft: '10px' }}>
        <option value="brandA">Thương Hiệu A</option>
        <option value="brandB">Thương Hiệu B</option>
        <option value="brandC">Thương Hiệu C</option>
      </select>
    </div>
  );
};

export default Button;

• Các component tự động thích ứng với chủ đề thương hiệu đang hoạt động.
• Sự lựa chọn từ dropdown cho phép thay đổi tại thời gian thực.

🔹 5. Bọc Ứng Dụng 🌍

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from './ThemeContext';

const fetchTheme = async (brand) => {
  const response = await fetch(`/themes/${brand}.json`);
  return response.json();
};

ReactDOM.render(
  <ThemeProvider initialBrand="brandA" fetchTheme={fetchTheme}>
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

• Các chủ đề có thể được lấy từ máy chủ từ xa hoặc CDN.
• Hỗ trợ cập nhật động mà không cần tái triển khai ứng dụng.

🔹 6. Sơ Đồ Luồng Khái Niệm 🗺️

Người dùng tải ứng dụng --> ThemeProvider thiết lập thương hiệu ban đầu
          |--> fetchTheme() lấy chủ đề thương hiệu (cục bộ hoặc API)
          |--> Biến CSS được cập nhật toàn cầu
          |--> Các component sử dụng chủ đề qua useContext
          |--> Người dùng chuyển thương hiệu --> setBrandTheme cập nhật ngữ cảnh
          |--> fetchTheme() tải chủ đề thương hiệu mới
          |--> Giao diện cập nhật động

🔹 7. Lợi Ích Của Chủ Đề Động Đa Thương Hiệu ⚡

1. Quản lý chủ đề tập trung cho nhiều thương hiệu.
2. Hỗ trợ lấy chủ đề tại thời gian thực và cập nhật.
3. Các component vẫn tổng quát và không phụ thuộc vào thương hiệu.
4. Mở rộng cho các thương hiệu tương lai mà không thay đổi logic component.
5. Tích hợp liền mạch với biến CSS, styled-components hoặc TailwindCSS.

🔹 8. Quy Trình Câu Chuyện 🌟

1. Ứng dụng tải lên → ThemeProvider lấy và áp dụng chủ đề cho thương hiệu mặc định.
2. Người dùng chọn một thương hiệu khác → setBrandTheme cập nhật ngữ cảnh.
3. Biến CSS được cập nhật → các component tái render với kiểu dáng mới.
4. Các chủ đề mới có thể được lấy động → giao diện phản ánh thương hiệu mới ngay lập tức.

Bài học rút ra: Một hệ thống thay đổi chủ đề linh hoạt, dựa trên thời gian thực tiết kiệm thời gian, giảm thiểu sự trùng lặp mã, và cho phép triển khai cùng một ứng dụng cho nhiều khách hàng với nỗ lực tối thiểu.

🔹 Thực Hành Tốt Nhất

• Sử dụng Context API một cách hiệu quả để giảm thiểu việc truyền props.
• Tổ chức mã nguồn rõ ràng và dễ hiểu để bảo trì dễ dàng hơn.
• Kiểm tra các chủ đề trên nhiều thiết bị và trình duyệt để đảm bảo tính tương thích.

🔹 Cạm Bẫy Thường Gặp

• Quá tải Context: Đảm bảo rằng không có quá nhiều dữ liệu được lưu trữ trong Context để tránh làm chậm ứng dụng.
• Thiếu tài liệu: Đảm bảo rằng bạn viết tài liệu rõ ràng cho việc sử dụng Context API.

🔹 Mẹo Hiệu Suất

• Sử dụng memoization cho các component để giảm thiểu việc render lại không cần thiết.
• Thực hiện lazy loading cho các component không cần thiết ngay lập tức.

🔹 Giải Quyết Vấn Đề

• Nếu chủ đề không được áp dụng đúng, hãy kiểm tra biến CSS trong trình duyệt để đảm bảo rằng chúng đã được thiết lập chính xác.
• Kiểm tra console để xem có lỗi nào liên quan đến việc lấy chủ đề không.

✍️ Viết bởi Yogesh Bamanier
🔗 LinkedIn