How to paginate in React/Redux like a hero

متن زیر ساختاریه که من توی چندتا پروژه برای paginate کردن با react/redux استفاده میکنم و نسبتا راضیم. امروز شخصی ازم درباره اینکه چجوری باید pagination رو توی ری‌اکت هندل کرد سوال پرسید, این مقاله جواب منه. اینجا هم منتشر میکنم تا اگه برای کسی مفید بود بتونه استفاده کنه 3>

خب واسه paginate کردن نظر به اینکه ریداکس داریم
من یه همچین کاری میکنم:

1- Reducers:

میام هر اسلایس ریداکسم که قراره دیتاهای توش paginate شن رو با این ساختار درنظر میگیرم:

یعنی یه فیلد paginations داریم توی خود slice که راجبش پایینتر صحبت میکنیم, و یه فیلد data که همه دیتا های این slice رو به شکل یه آبجکت داره که key هر دیتا id اون دیتاس.

حالا راجب paginations یه همچین ساختاری براش درنظر میگیریم:

یعنی برا هر pagination ای که توی اپمون روی این دیتا میتونیم داشته باشیم یه فیلد جداگونه توی slice همین دیتا با اسم خاص خودش تعریف میکنیم که ۱- آیدی دیتا هایی که توی این pagination هستن رو به ترتیب توی یه آرایه ذخیره میکنه. ۲- لینکی که برا لود صفحه بعد نیازه ۳- لینکی که برا لود صفحه قبل نیازه و ۴- لینکی که برا لود صفحه اول نیازه رو ذخیره میکنه.

حالا با داشتن این تصویر ذهنی از slice های store مون میتونیم برای یوزرهامون همچین ردیوسری بنویسیم:

خب توی این reducer همونجوری که میبینی خیلی توجهی به paginations و چیزای مربوط بهش نکردیم, دلیلش اینه که اونارو توی یه higher order reducer هندل میکنیم چون خیلی جاها میخوایم استفاده کنیم:

و بعد میتونیم اینجوری ازش استفاده کنیم:

حالا هر slice ای که بخوایم رو میتونیم با اضافه کردن یه خط روش paginate بزنیم.

2 - Action Creators

در ادامه actionCreator هارو هم خیلی راحت طبق همون اکشن هایی که داریم میسازیم من بعنوان مثال قضیه رو برای reload و loadMore پیش میبرم و حالت های loadPrevious و اینارو کاری نداریم:

البته اینا نسبتا ورژن ساده شده‌ و general شده‌ی چیزین که تو واقعیت استفاده میکنم.

3- Selectors

میشه برا راحتی کار selector های زیر رو هم اضافه کرد:

4- HOC

و در آخر هم میتونیم یه همچین HOC ای داشته باشیم:

و هرجا که خواستیم ازش استفاده می‌کنیم:

و یا:

و تمام :)

ورژن تکست همه کدهای بالا توی این gist موجوده:
https://gist.github.com/Eddie-CooRo/50c44ec633e6f1a2af1b86767d3ba138

اگر هم هر سوالی داشتید میتونید توی تلگرام بهم پیام بدید.

telegram: @Eddie_CooRo

(توجه: تمامی کدهای بالا رو همین الان نوشتم و تست نشده ان, ممکنه ارور های ریزی داشته باشن که خود کامپایلر سرتون جیغ میکشه و میتونید درستش کنید, اگه چیزی بود گزارش کنید که من هم اصلاح کنم)