ویرگول
ورودثبت نام
عباس حسینی
عباس حسینی
خواندن ۶ دقیقه·۳ سال پیش

مدیریت state در فلاتر- ترجمه ی توضیحات سایت flutter.dev- بخش اول

سلام. راجع به state management خیلی مقالات هست اما چه مقاله و داکیومنتی بهتر از سایت فلاتر که خودش توضیح داده. من صرفا اومدم و ترجمه کردم تا جاییکه سوادم یاری میکرد که حداقل کمکی بشه برا درک بهتر این مبحث تقریبا پیچیده. اگر جایی اشتباه ترجمه شده ممنون میشم اطلاع بدید تا اصلاحش کنم. نکته دیگه اینکه من فقط جاهایی که خودم لازمم بود رو ترجمه کردم پس ببخشید که بعضی جاها رفرنس میدم به سایت خود فلاتر.


آپدیت: عناوین تیتر هارو لینک دادم به رفرنس فلاتر. بعد از کلیک 5 ثانیه صبر کنید و دکمه skip سمت راست صفحه رو کلیک کنید


مدیریت State

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

همانطور که Flutter را کاوش می کنید، زمانی فرا می رسد که باید stateبرنامه را بین صفحه نمایش ها، در سراسر برنامه خود به اشتراک بگذارید. رویکردهای زیادی وجود دارد که می توانید اتخاذ کنید، و سؤالات زیادی برای فکر کردن وجود دارد.

در صفحات بعدی با اصول کاربا با state در اپلیکیشن های فلاتر آشنا خواهید شد.


شروع فکرکردن به صورت declaratively

اگر از یک فریمورک ضروری (مانند Android SDK یا iOS UIKit) به Flutter می‌آیید، باید از منظر جدیدی به توسعه برنامه فکر کنید.

***چون من به این منابع فلاتر نیاز نداشتم از ترجمه ی این بخش میگذرم و اگر خواستید و نیازتون شد، میتونید از این لینک خودتون مطالعه کنید.***

بین ephemeral state و app state تفاوت قائل شوید

این مقاله جهت معرفی ephemeral state ، app state و چگونگی مدیریت هر کدام در فلاتر است.

در کلی ترین معنای ممکن، استیت(state) یک برنامه تمام چیزهایی است که در هنگام اجرای برنامه درحافظه وجود دارد. این شامل assets ، تمام متغیر هایی که فریمورک فلاتر در رابط کاربری نگه میدارد، animation state, texture, font و بقیه ی موارد است. در حالیکه این گسترده ترین تعریف ممکن از state است، برای طراحی یک اپلیکیشن آنچنان هم مفید نیست.

اول، شما حتی برخی از state هارا مدیریت نمیکنید.(مانند textureها) فریمورک آنها را مدیریت میکند. بنابراین مدیریت استیت پرکاربردی که تعریفش میکنیم، “”هر داده ای که برای بازسازی رابط کاربری خود در هر لحظه نیاز دارید”” است. دوم ، حالتی که خودتان معرفی میکنید است که میشود آنرا به دو بخش تقسیم کرد: استیت زود گذرephemeral state و استیت برنامه app state .

استیت زودگذر(ephemeral state)

استیت زودگذر( که گاهی نیز UI state یا Local State گفته میشود) ، استیتی است که شما میتوانید به صورت مرتب داخل یک ویجت استفاده کنید.

این عمدا یک تعریف مبهم است بنابراین در زیر چند مثال آورده شده: (سخن نویسنده: اگر با ویجت های زیر آشنایی ندارید حتما برید دربارش مطالعه کنید چون اینجور ممکنه براتون گنگ باشه.)

  • current page در ویجت PageView
  • current progress در complex animation
  • current selected tab در یک BottomNavigationBar

بخش های دیگر درخت ویجت به ندرت نیاز به دسترسی به استیت دارد. نیازی به سریال سازی آن نیست و به چیزهای پیچیده تر تغییر نمیکنه.( – خودش هم فهمید چرت و پرت میگه، پایینتر توضیح میده)

به عبارت دیگر، نیازی به تکنولوژیهای مدیریت استیت نیست.(ScopedModel, Redux, و چیزهای دیگه). در این نوع استیت فقط به یک StatefulWidget نیاز است.

در زیر، شما میبینید که currently selected item در یک bottom navigation bar در یک فیلد index_ ، در کلاس _MyHomepageState نگهداشته شده . در این مثال ، index_ یک استیت زودگذر است:

https://gist.github.com/AbbasHoseini/8870f8081ed700a31ab164aae6caf8f6#file-gistfile1-dart


در این کد setState و یک فیلد داخل کلاس StatefulWidget  کاملا طبیعیست.(یک روال معمول) هیچ قسمت از اپلیکیشن شما نیازی به دسترسی به index_ ندارد. متغیر فقط داخل ویجت MyHomepage تغییر میکند.و وقتی کاربر برنامه را ببند اپ را ری استارت کند، شما نیازی به فکر اینکه index_ را به صفر تبدیل کنید ندارید.

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

اپ استیت(App State)

استیتی که زودگذر نیست و شما میخواهید به قسمت های دیگر اپ به اشتراک بگذارید، و میخواهید بین سشن های کاربر نگه دارید، چیزی است که ما آنرا application state اپلیکیشن استیت مینامیم(گاهی اوقات هم استیت به اشتراک گذاشته شدهshared state).

مثالهای اپ استیت:

  • User preferences (خودمم نمیدونم چیه شاید تنظیمات کاربری)
  • اطلاعات ورودLogin info
  • اعلانهای داخل اپ شبکه اجتماعی Notifications in a social networking app
  • سبد خرید در یک اپ فروشگاهی The shopping cart in an e-commerce app
  • استیت خوانده شده/خوانده نشده مقاله ها در اپ اخبار Read/unread state of articles in a news app

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

هیچ قانون مشخصی وجود ندارد

برای واضح بودن موضوع، شما میتوانید از State و setState() برای مدیریت تمام استیت های اپ استفاده کنید. در حقیقت تیم فلاتر این را در بسیاری از نمونه های برنامه انجام میدهد(از جمله برنامه ای که برای بار اول پروژه فلاتر را شروع میکنید. ((در واقعا همون پروژه شمارنده که وقتی میخواید یه پروژه فلاتری جدید بسازید))).

در روش دیگر، برای مثال شما ممکن است تصمیم بگیرید -در زمینه خاص برنامه شما- selected tab در bottomnavigation bar استیت به صورت زودگذر نباشد. شما ممکن است نیاز داشته باشید که آنرا در خارج از کلاس تغییر دهید ، بین سشن ها نگه دارید(keep it between sessions) و موارد دیگر. در این حالت index_ یک اپ استیت(app state) است.

هیج روش مشخصی نیست، قانون جهانی برای تشخیص اینکه آیا یک متغیر خاص، ephemeral state است یا app state. گاهی شما باید یکی را به دیگری تغییر دهید. برای مثال شما با اپ را با استیت زودگذر(ehemeral state) شروع میکنید اما با افزایش ویژگی های برنامه شما و افزایش فیچر ها، ممکن است نیاز باشد به استیت اپ تغییر پیدا کند.

به همین دلیل ، نمودار زیر را با جزئیات زیاد در نظر بگیرید:


وقتی درباره ی استیت های React (زبان برنامه نویسی React) در مقابل Redux’s store ، نویسنده ی Redux ، دن آبراموف (Dan Abramov) سوال پرسیده میشود جواب میدهد:

“قاعده سرانگشتی این است: هرکاری که کمتر ناخوشایند است را انجام دهید.

به طور خلاصه، دو نوع استیت در برنامه های فلاتر وجود دارد؛ استیت زود گذر یا ephemeral state را میتوان با State و setState() پیاده سازی کرد و اغلب برای یک ویجت استفاده میشود. حالت بعدی اپ استیت یا app state است. هر دو نوع جای خود را در هر برنامه فلاتر دارند (- یعنی میتونه تو یک برنامه از هر دو استفاده کرد-) و استفاده از این دو به ترجیح شما و پیچیدگی برنامه بستگی دارد.

ادامه ی مطلب در پست دوم

همچنین پست سوم با عنوان مثال کاربردی فلاتر برای مدیریت استیت با پکیج Provider رو میتونید تو این لینک ببینید.

مدیریت استیتstate managementflutterکار با پکیج providerمثال کاربردی فلاتر برای مدیریت state
Learner And Developer
شاید از این پست‌ها خوشتان بیاید