واکنش نشان دهید | وضعیت بارگذاری چندگانه را در همان صفحه نظارت کنید

Summarize this content to 400 words in Persian Lang

مقدمه

هنگام توسعه یک برنامه مبتنی بر داده، اغلب نیاز به ایجاد صفحه داشبورد متشکل از چندین منبع داده داریم. به عنوان مثال، در یک برنامه مالی، نمودارهایی که روند فروش ماهانه، هزینه ها و موجودی نقدی را نشان می دهند به عنوان اجزای جداگانه در همان صفحه نامیده می شوند.

در چنین مواردی، ممکن است بخواهید یک رابط کاربری “بارگیری” را برای کل صفحه نمایش دهید تا زمانی که همه داده ها به طور کامل بارگیری شوند… دقیقاً مانند این.

می‌تواند چندین رویکرد برای رسیدن به این هدف وجود داشته باشد، اما من می‌خواهم روشی را معرفی کنم که از Context API استفاده می‌کند.

فرآیند تفکر

اگر مؤلفه‌های خاصی فقط در صفحات خاصی استفاده می‌شوند، ظاهراً می‌توان مشکل را به سادگی با مدیریت وضعیت در کنار آن صفحات حل کرد.
با این حال، در این مورد، اجزای حاوی توابع واکشی مجدداً در چندین صفحه نمایش استفاده می‌شوند. بنابراین، بهتر است مکانیزمی داشته باشیم که در آن هر صفحه به طور مستقل پیشرفت واکشی را با توجه به تعداد اجزای موجود تشخیص داده و نظارت کند.

راه حل

مفهوم

از Context API استفاده کنید. حالتی را ایجاد کنید که تعداد فرآیندهای بارگیری را شناسایی کرده و آنها را تا زمان تکمیل نظارت کند و کل برنامه را با این وضعیت بپیچد.
ساختار کلی به شرح زیر است: لایه LAYOUT رابط کاربری را با توجه به وضعیت بارگذاری تعریف می کند، در حالی که هر لایه COMPONENT وضعیت بارگیری خود را از طریق Context API گزارش می کند. سپس برنامه کلی این وضعیت ها را نظارت می کند. هیچ چیز خاصی به لایه PAGE اختصاص داده نشده است، به این معنی که هیچ مدیریت خاص صفحه مانند “صفحه X دارای تعداد Y از توابع واکشی است” وجود ندارد.

APP>
LAYOUT>
PAGE>
COMPONENT>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پس از راه‌اندازی Context API (گام‌های 1-3 زیر)، تنها کاری که باید انجام دهید این است که startLoading و stopLoading را در توابع fetch اجرا کنید، بدون نیاز به تنظیمات اضافی، به برنامه اجازه می دهد تا مقیاس شود در حالی که نگهداری آن آسان است. من معتقدم که این یک رویکرد بسیار مقیاس پذیر و ساده برای نگهداری است.

مرحله

#1. API متنی را تنظیم کنید

برای شمارش بارگذاری ها، متغیر زمینه و حالت ها را فراخوانی کنید.

// Create the context
const LoadingContext = createContext();

// Create a provider component
export const LoadingProvider = ({ children }) => {
const [loading, setLoading] = useState(true);
const [loadingCount, setLoadingCount] = useState(0)
…}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سپس، چند توابع ساده برای تماشای پیشرفت بارگذاری ها ایجاد کنید

…
const startLoading = useCallback(() => {
setLoadingCount((count) => count + 1);
}, []);

const stopLoading = useCallback(() => {
setLoadingCount((count) => count – 1);
}, []);

useEffect(() => {
setLoading(loadingCount > 0); // if all the loadings is completed (loadingCount=0), ‘loading’ gets false.
}, [loadingCount]);
…

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ارائه دهنده را برگردانید و حالت ها و توابع را پاس کنید

…
const value = useMemo(
() => ({loading, startLoading, stopLoading,}),
[loading, startLoading, stopLoading]);

return (
LoadingContext.Provider value={value}>{children}LoadingContext.Provider>
);};

// Custom hook to use the LoadingContext
export const useLoading = () => useContext(LoadingContext);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

#2. در App.jsx، کل برنامه یا صفحه خاص را بپیچید

const App = ()=>{
return (
LoadingProvider>
Layout>
Main/> // example
Sub/> // example
Layout>
LoadingProvider>
)
}

const Main = ()=>{
return(

ChartComponent type=”A”>
ChartComponent type=”B”>
ChartComponent type=”C”>
>
)
}

const Sub =()=>{
return(

ChartComponent type=”A”>
ChartComponent type=”C”>
>
)
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

#3. افکت UI را در Layout.jsx تنظیم کنید

import { useLoading } from “YOUR FILE PATH”;

const Layout = ({children}) => {
const { loading } = useLoading();
const [showLoadingScreen, setShowLoadingScreen] = useState(true);
const handleCloseLoadingScreen = () => {
setShowLoadingScreen(false);
};
return (

{loading && showLoadingScreen && (
LoadingScreen onClose={handleCloseLoadingScreen} />)}
>
)
}

const LoadingScreen = ({onClose})=>{
{/* FOR ESC KEYDOWN */}
useEffect(() => {
const handleEsc = (event) => {
if (event.key === “Escape”) {
onClose();
}};
window.addEventListener(“keydown”, handleEsc);
return () => {
window.removeEventListener(“keydown”, handleEsc);
};}, [onClose]);

return(

{/* ADD LOADING DISPLAY */}
>
)
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

#4. در مؤلفه ای که درخواست HTTP GET در آن رخ می دهد

…
import { useLoading } from “YOUR FILE PATH”;

const ChartComponent =({type})=>{
const { startLoading, stopLoading } = useLoading();

useEffect(() => {
startLoading();
//…
//YOUR FETCH FUNCTION
//…
stopLoading();
}
,[startLoading, stopLoading])

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این مقاله بر اساس React 18 است و در React 19 اعلام شده است که context.provider در نسخه آینده منسوخ خواهد شد.

APP>
   LAYOUT>
       PAGE>
          COMPONENT>

// Create the context
const LoadingContext = createContext();

// Create a provider component
export const LoadingProvider = ({ children }) => {
  const [loading, setLoading] = useState(true);
  const [loadingCount, setLoadingCount] = useState(0)
  ...}

...
  const startLoading = useCallback(() => {
    setLoadingCount((count) => count + 1);
  }, []);

  const stopLoading = useCallback(() => {
    setLoadingCount((count) => count - 1);
  }, []);

  useEffect(() => {
    setLoading(loadingCount > 0); // if all the loadings is completed (loadingCount=0), 'loading' gets false.
  }, [loadingCount]);
  ...

...
 const value = useMemo(
    () => ({loading, startLoading, stopLoading,}),
    [loading, startLoading, stopLoading]);

  return (
    LoadingContext.Provider value={value}>{children}LoadingContext.Provider>
  );};

// Custom hook to use the LoadingContext
export const useLoading = () => useContext(LoadingContext);

const App = ()=>{
    return (
    LoadingProvider>
        Layout>
            Main/> // example
            Sub/> // example
        Layout>
    LoadingProvider>
    )
}

const Main = ()=>{
    return(
    
        ChartComponent type="A">
        ChartComponent type="B">
        ChartComponent type="C">
    >
    )
}

const Sub =()=>{
return(
    
        ChartComponent type="A">
        ChartComponent type="C">
    >
    )
}

import { useLoading } from "YOUR FILE PATH";

const Layout = ({children}) => {
    const { loading } = useLoading();
    const [showLoadingScreen, setShowLoadingScreen] = useState(true);
  const handleCloseLoadingScreen = () => {
    setShowLoadingScreen(false);
  };
    return (
        
             {loading && showLoadingScreen && (
        LoadingScreen onClose={handleCloseLoadingScreen} />)}
        >
    )
}

const LoadingScreen = ({onClose})=>{
   {/* FOR ESC KEYDOWN */}
      useEffect(() => {
    const handleEsc = (event) => {
      if (event.key === "Escape") {
        onClose();
    }};
    window.addEventListener("keydown", handleEsc);
    return () => {
      window.removeEventListener("keydown", handleEsc);
    };}, [onClose]);

  return(
      
      {/* ADD LOADING DISPLAY */} 
      >
  )
}

...
import { useLoading } from "YOUR FILE PATH";

const ChartComponent =({type})=>{
     const { startLoading, stopLoading } = useLoading();

     useEffect(() => {
    startLoading();
  //...
    //YOUR FETCH FUNCTION
    //...
        stopLoading();
    }
    ,[startLoading, stopLoading])