دوستان عزیزی که میخوان بخش اول رو مطالعه کنن، میتونن از این لینک بهش دسترسی داشته باشن.
مدیریت استیت در قالب یک اپ ساده
حالا که شما درباره ی declarative UI programming ( — همونجور که تو بخش اول گفته شد ترجمه و مطالعه ی این بخش رو برای کسانی که از منابع Android SDK یا iOS UIKit به فلاتر مهاجرت کردن به عهده ی خودشون گذاشتیم–) و تفاوت بین epemeral state و app state دانستید، برای یادگیری مدیریت استیت در یک اپ ساده آماده اید.
در این صفحه ما به سراغ پکیج provider میرویم.
اگر شما به دنیای فلاتر تازه وارد شدید، دلیلی برای انتخاب و کار با پکیج های دیگر (مانند Redux, Rx, hooks ) ندارید، و این احتمالا همان چیزی است که باید با آن شروع کنید. فهمیدن و یادگیری پکیج provider کاملا آسان است و از کد زیادی برای پیاده سازی استفاده نمیکند. همچنین از مفاهیمی استفاده میکند که در هر پکیج دیگری قابل اجرا هستند.(تو داکیومنت کلمه ی approach استفاده کرده بود و من ندونستم از چه کلمه ای برا ترجمش استفاده کنم :/)
آپدیت: عناوین تیتر هارو لینک دادم به رفرنس فلاتر. بعد از کلیک 5 ثانیه صبر کنید و دکمه skip سمت راست صفحه رو کلیک کنید.
(پرووایدر) میگوید که اگر پیشینه ی قوی در مدیریت استیت در فریمورک های کنشگرا( reactive frameworks) دارید، میتوانید لیست پکیج ها و آموزش های آنهارا در این پیج ببینید.
مثال ما:
برای مثال، برنامه ساده زیر را در نظر بگیرید:
این اپ دو صفحه ی جداگانه دارد. صفحه ی کاتالوگ(catalog) و صفحه ی کارت(cart) (که به ترتیب توسط ویجت های MyCatalog و MyCart نشان داده شده. این اپ میتواند یک اپلیکیشن فروشگاهی باشد، اما شما میتوانید آنرا در ساختار اپلیکیشن شبکه اجتماعی تصور کنید(جایگزین کاتالوگ ، دیوارباشد(منظور صفحه ی خانه) و جاگزین کارت، موارد دلخواه(favorites).
صفحه ی کاتالوگ یک Appbar سفارشی به نام MyAppBar و یک لیست پیمایشی به نام MyListItems را شامل میشود.
در اینجا برنامه به عنوات یک درخت ویجت ترسیم شده است.
بنابراین ما حداقل 5 زیرکلاس از ویجت داریم. بسیاری از آنها نیاز به دسترسی به استیت دارند که در جای دیگر است. برای مثال، هر MyListItem نیاز به اضافه کردن خودش در سبد خرید(cart) دارد. همچنین ممکن است ببین که در حال حاضر این آیتم در سبد خرید موجود هست یا نه.
همین موضوع مارا به اولین سوال مواجه میکند: استیت فعلی (current state) را در کجا قرار دهیم؟
هندل کردن استیتLifting State up
در فلاتر، منظقی است که استیت را در بالاتر از ویجت هایی که استفاده میکنید نگه دارید.
چرا؟ اگر در فریمورک هایی مانند فلاتر، میخواهید UI را تغییر دهید، باید آنرا دوباره بسازید(rebuild). هیچ راه آسانی برای داشتن MyCart.updateWith(somethingNew)
حتی اگر کدی مانند کد بالا دریافت کردید، بعدا باید با موارد زیر در MyChart مقابله کنید.
شما باید استیت فعلی UI را در نظر بگیرید و اطلاعات جدید را به آن apply کنید(اعمال کنید). اجتناب از باگها در این روش دشوار است.
در فلاتر، ویجت هایی که میسازید با هر بار تغییر محتوا، ساخته میشود. به جای MyCart.updateWith(somethingNew) (که یک متد گفته میشود) باید MyCart(contents) ( که سازنده(constructor) گفته میشود) استفاده کنید. زیرا شما فقط میتوانید ویجت های جدید را در متد build والدینشان بسازید. اگر میخواهید محتوا content را تغییر دهید، نیاز است که والد MyChart آنجا یا بالاتر باشد.
حال MyChart تنها یک مسیر کد برای ساخت هر ورژن UI دارد.
در مثال ما، محتوا(contents) لازم است که به حالت زنده(live) در MyApp باشد. هرلحظه تغییر کرد، MyCart دوباره از بالا ساخته میشود(در ادامه بیشتر راجع به آن صحبت خواهیم کرد) بنابراین MyCart نیازی به نگرانی از بابت lifecycle نخواهد داشت- فقط اعلام میکند چه چیزی را برای هر محتوای داده شده نشان میدهد. هنگامی که تغییر کند، ویجت MyCart قبلی از بین میرود و به طور کامل با ویجت جدید جایگزین میشود.
این دقیقا منظورمان است که وقتی میگوییم ویجت ها تغییر ناپذیر(immutable) هستند. آنها عوض نمیشوند- جایگزین میشوند.
اکنون که میدانیم وضعیت سبد را در کجا قرار دهیم، بیاید تا نحوه دسترسی به آنرا ببینیم.
دسترسی به وضعیت(یا همون state)
وقتی کاربر روی یکی از آیتم های کاتالوگ کلیک میکند، آن آیتم به سبدخرید(cart) اضافه میشود. اما از آنجایی که سبدخرید در بالای MyListItem به صورت live قرار دارد، چگونه ما آنرا انجام دهیم؟
یک گزینه ساده این است که یک callback ارائه دهد، MyListItem میتواند وقتی کلیک شد، صداcall بزند. توابع #دارت اشیاء درجه یک هستند، بنابراین شما میتوانید آنهارا به هرطریقی پاس بدهید. پس داخل MyCatalog میتوانید روش زیر را دنبال کنید:
این روش کار میکند، اما برای اپ استیت که میخواهید آنرا از جاهای مختلف تغییرش دهید، مجبورید تعدادی زیاد callback به جاهای مختلف پاس بدهید–که خیلی سریع پیر(قدیمی) میشود.(سخن نویسنده: نفهمیدم منظورش ما بودیم یا کد😂😂)
خوشبختانه فلاتر مکانیزم هایی برای فراهم کردن دیتا و سرویس ها برای ویجت های نوادگان دارد.(به عبارت دیگر نه فقط برای ویجت های فرزند بلکه برای هر ویجت زیر آنها– درواقع میگه تا دوتا ویجت پایینتر از ویجت اصلی). همانطور که از فلاتر انتظارش را دارید، جایی که همه چیز یک ویجت است، این مکانیزم ها فقط از نوع خاصی از ویجت ها هستند– InheritedWidget, InheritedNotifier, InheritedModel و ویجت های دیگر. ما آنها را در اینجا پوشش نمیدهیم ، زیرا برای کاری که اینجا میخواهیم انجام دهیم کمی سطح پایین هستند.
در عوض ما از پکیجی استفاده میکنیم که با ویجت های سطح پایین کار میکند اما از استفاده از آن آسان است. نام این پکیج Provider است.
پایان قسمت دوم.
(اگه تا اینجای کار پست برات مفید بوده، برا وقتی که گذاشتم با زرین پال یا ایدی پی حمایتم کن یا از کافه ت برام یه کافه بخر)
ادامه ی پست با عنوان مثال کاربردی فلاتر برای مدیریت استیت با پکیج Provider رومطالعه کنید.
دسترسی به بخش اول
