🚀 ساختن یک سیستم اعلان در واکنش با استفاده از الگوی میخانه زیر

خداحافظی از حفاری و زمینه! 🎉

مقدمه
هر برنامه React به اعلان ها نیاز دارد – خواه یک پیام موفقیت ، هشدار خطا باشد یا یک نان تست هشدار دهنده. اما چگونه می توانیم اعلان ها را در سطح جهان بدون ردوکس ، زمینه یا حفاری پروانه مدیریت کنیم؟

جواب: الگوی انتشار-اشتراک (میخانه)!

در این پست ، ما یک سیستم اعلان ایجاد خواهیم کرد که:
✅ به جای زمینه یا ردوکس از میخانه زیر استفاده می کند
✅ در سطح جهانی بدون حفاری پروانه کار می کند
✅ به طور خودکار اعلان ها را رد می کند
✅ اعلان های پشته در بالای یکدیگر

🧠 الگوی Pub-Sub چیست؟
الگوی انتشار-اشتراک (Pub-Sub) یک سیستم پیام رسانی است که در آن:

ناشران رویدادهایی را ارسال می کنند.
مشترکین به آن وقایع گوش می دهند و بر این اساس واکنش نشان می دهند.
این امر آن را برای اعلان ها مناسب می کند زیرا هر بخشی از برنامه می تواند یک رویداد را ایجاد کند ، و سیستم اعلان به طور خودکار آن را اداره می کند – بدون نیاز به وابستگی مستقیم!

🛠 مرحله 1: ایجاد یک اتوبوس رویداد (برنامه Pub-Sub)
از آنجا که JavaScript فاقد یک سیستم زیر میخانه داخلی است ، ما یک اتوبوس رویداد سبک وزن ایجاد خواهیم کرد.

🔹 یک پرونده جدید ایجاد کنید: eventbus.js

const eventBus = {
  events: {},

  subscribe(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);

    // Return unsubscribe function
    return () => {
      this.events[eventName] = this.events[eventName].filter(fn => fn !== callback);
    };
  },

  publish(eventName, data) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(callback => callback(data));
    }
  }
};

export default eventBus;

🔍 چگونه این کار می کند:
✅ مشترک شدن (نام EventName ، پاسخ به تماس): یک شنونده را برای یک رویداد اضافه می کند.
✅ انتشار (EventName ، Data): همه تماس های تماس تلفنی را به یک رویداد گوش می دهد.
✅ یک عملکرد نامشخص را برمی گرداند تا در صورت لزوم بتوانیم شنوندگان را تمیز کنیم.

📌 مرحله 2: مؤلفه لیست اعلان را ایجاد کنید
لیست اعلان:
✅ برای اطلاع از وقایع از EventBus گوش دهید
✅ اعلان های موجود در کشور محلی
✅ به طور خودکار اعلان ها را بعد از 3 ثانیه حذف کنید

🔹 یک پرونده جدید ایجاد کنید: notificationList.js

import React, { useState, useEffect } from "react";
import eventBus from "./eventBus";
import "./Notifications.css";

const NotificationList = () => {
  const [notifications, setNotifications] = useState([]);

  useEffect(() => {
    // Subscribe to "notify" event
    const unsubscribe = eventBus.subscribe("notify", (notification) => {
      const id = Date.now();
      setNotifications((prev) => [...prev, { id, ...notification }]);

      // Auto-remove notification after 3 seconds
      setTimeout(() => {
        setNotifications((prev) => prev.filter((n) => n.id !== id));
      }, 3000);
    });

    return () => unsubscribe(); // Cleanup on unmount
  }, []);

  return (
    

      {notifications.map((notif) => (
        

          {notif.message}
        
      ))}
    
  );
};

export default NotificationList;

🎨 مرحله 3: برخی از سبک ها را برای اعلان ها اضافه کنید
🔹 یک پرونده جدید ایجاد کنید: notifications.css

.notifications-container {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}

.notification {
  padding: 10px 15px;
  color: white;
  font-weight: bold;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  opacity: 0.9;
  animation: fade-in 0.3s ease-in-out;
}

.notification.success {
  background-color: green;
}

.notification.failure {
  background-color: red;
}

.notification.warning {
  background-color: orange;
}

@keyframes fade-in {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

⚡ مرحله 4: از آن در مؤلفه برنامه استفاده کنید
حال ، بیایید با انتشار اعلان ها هنگام کلیک بر روی دکمه ها ، همه آن را با هم ببندیم.

app.js را اصلاح کنید

import React from "react";
import eventBus from "./eventBus";
import NotificationList from "./NotificationList";

const App = () => {
  const notify = (type, message) => {
    eventBus.publish("notify", { type, message });
  };

  return (
    

      
Notification System (Pub-Sub Pattern)
       notify("success", "Success!")}>Success
       notify("failure", "Failure!")}>Failure
       notify("warning", "Warning!")}>Warning

      
    

  );
};

export default App;

🎯 چگونه همه چیز با هم کار می کند

1⃣ روی یک دکمه → EventBus.publish (“Notify” ، {نوع ، پیام} کلیک کنید)
2⃣ اعلان لیست برای رویدادهای “اطلاع رسانی” گوش می دهد
3⃣ اعلان در UI ظاهر می شود
4⃣ بعد از 3 ثانیه ، اعلان خودکار

📝 افکار نهایی: چرا از Pub-Sub استفاده می کنید؟

استفاده از Pub-Sub در React قدرتمند است زیرا:
✅ هیچ زمینه ای یا ردو مورد نیاز → تمیز و سبک نیست
✅ کاملاً جداشده → اجزای دیگر نیازی به دانستن در مورد یکدیگر ندارند
✅ مقیاس پذیر → می تواند برای پشتیبانی از وب سایت ها ، ورود به سیستم و موارد دیگر گسترش یابد

🔥 مراحل بعدی

آیا می خواهید این را بیشتر کنید؟ سعی کنید اضافه کنید:
✅ یک دکمه نزدیک برای حذف دستی اعلان ها
✅ جلوه های ورودی/خروج متحرک
✅ اعلان های مداوم که تا زمان برکناری باقی می مانند

🚀 اکنون بروید و این را در پروژه های خود پیاده سازی کنید! برنامه نویسی مبارک! 🎉