معرفی مدل سرور React (RSM) – فلسفه طراحی

مقاله قبلی

فلسفه طراحی پشت RSM

این مقاله همچنین در https://github.com/jason89521/react-server-model#design-philosophy موجود است

استفاده از Redux مزایای خود را دارد، به خصوص زمانی که صحبت از سفارشی سازی ساختار داده می شود. در شرکت ما، صفحه بندی یکی از پرکاربردترین ساختارهای داده برای نهادهای مختلف مانند پست ها، نظرات و انجمن ها است. برای ساده سازی فرآیند ایجاد صفحه بندی، مهندس ارشد ما یک createPaginationAdapter تابع.

نوع حالت برگردانده شده توسط createPaginationAdapter به صورت زیر تعریف می شود:

export interface Pagination {
  noMore: boolean;
  index: EntityId[];
  loading: boolean;
  fetched: boolean;
  error?: any;
}

export interface PaginationState<T> {
  data: Record<EntityId, T | undefined>;
  paginations: Record<string, Pagination | undefined>;
}

PaginationState از دو ویژگی تشکیل شده است: data و paginations. data در حالی که تمام داده های موجودیت را ذخیره می کند paginations وضعیت های صفحه بندی و شناسه های مرتبط را پیگیری می کند.

برای نشان دادن، اجازه دهید مثالی از مدیریت پست ها را در نظر بگیریم. هنگام بازیابی لیست پست ها بدون هیچ فیلتری، نقطه پایانی API شبیه به آن خواهد بود /api/posts?filter=allو کلید صفحه بندی مربوطه خواهد بود filter=all. فرض کنید API صفحه اول پست ها را با شناسه های 1 تا 5 برمی گرداند. در این حالت، paginations["filter=all"] شامل موارد زیر خواهد بود:

{
    noMore: false,
    index: [1, 2, 3, 4, 5],
    loading: false,
    fetched: true
}

این data شی داده های پست واقعی را ذخیره می کند:

{
    1: {
        // post data
    },
    // and so on
}

برای دسترسی به صفحه بندی برای filter=all، می توانیم از شی به دست آمده استفاده کنیم createPaginationAdapter:

const postAdapter = createPaginationAdapter();

function usePost() {
  const postPagination = useSelector(state =>
    postAdapter.selectByPagination(state.post, 'filter=all')
  );
  return postPagination;
}

در این مرحله، ممکن است فکر کنید، “آیا این شبیه به RTK نیست؟ createEntityAdapter“در واقع، شباهت هایی بین این دو وجود دارد، اما createPaginationAdapter یک نسخه پیشرفته است که به طور خاص برای داده های صفحه بندی طراحی شده است. حال، بیایید به مهمترین مزیت آن بپردازیم.

آیا به یاد دارید زمانی که React Query نمی تواند نیازهای ما را برآورده کند؟ بله، زمانی است که چندین صفحه داریم که ممکن است یک پست را شامل شود. React Query نمی تواند این سناریو را به طور موثر مدیریت کند، اما آداپتور صفحه بندی کاملاً این مشکل را حل می کند. با متمرکز کردن تمام داده ها در data و با استفاده از paginations برای جمع‌آوری شناسه‌های مرتبط، هر به‌روزرسانی برای یک پست خاص به طور خودکار در تمام صفحه‌های حاوی آن پست منعکس می‌شود. هیچ تناقضی وجود نخواهد داشت.

بنابراین، فلسفه طراحی پشت RSM چیست؟

پاسخ در نهفته است ساختارهای داده سفارشی شده.

هر برنامه دارای الزامات منحصر به فردی برای ساختار داده است. در شرکت ما طراحی کردیم PaginationState برای برآوردن نیازهایمان فلسفه طراحی RSM توسعه دهندگان را قادر می سازد تا ساختارهای داده را متناسب با نیازهای خاص خود تعریف و استفاده کنند. شما فقط باید برای ایجاد آداپتورهای مناسب و آموزش RSM در مورد نحوه واکشی داده و همگام سازی آن با مدل خود تلاش کنید. RSM از بقیه موارد، از جمله حذف مجدد، اعتبارسنجی مجدد و موارد دیگر مراقبت می کند.

با این حال، ایجاد یک آداپتور به مقداری کد نیاز دارد، بنابراین RSM همچنین تلاش می‌کند تا آداپتورهای از پیش ساخته‌شده‌ای را ارائه کند که بیشتر موارد استفاده را برآورده کند. اگر ساختار داده جدیدی در ذهن دارید که RSM هنوز از آن پشتیبانی نمی کند، از پیشنهادات شما استقبال می کنیم و تلاش خواهیم کرد تا آنها را پیاده سازی کنیم.

در حال حاضر، RSM فقط ارائه می دهد createPaginationAdapterو من به اشکال دیگر ساختار داده فکر نکرده ام. اگر ایده ای دارید، لطفا به من بگویید!

شما می توانید RSM را امتحان کنید و هر گونه بازخوردی را به من ارائه دهید. متشکرم!

مخزن RSM: https://github.com/jason89521/react-server-model