در برنامه نویسی فلاتر یکی از مباحث مهمی که وجود دارد مدیریت State هست.
برای انجام این کار هم روش ها و پکیج های مختلفی وجود داره, اما به طور کلی راه های مدیریت State فلاتر عموما شامل موارد زیر می شود:
در مورد پیاده سازی Bloc در Flutter به طور کامل قبلا صحبت کردیم.
بنابر این در این مطلب با مقدمات پیاده سازی الگوی Redux آشنا میشیم.
Redux معماری است که به همراه جریان یکطرفه اطلاعات باعث میشود که توسعه برنامه آسان تر از قبل شود.
ریداکس از بخش های مهم زیر تشکیل شده است که در ادامه به بررسی هر یک میپردازیم.
برای درک بهتر میتونید از تصویر زیر کمک بگیرید.
در Redux بخش Store وظیفه نگهداری از آبجکت State و داره که در واقع نماینده State کل اپلیکیشن می باشد.
حالا تمام Event یا رویداد های اپلیکیشن بیانگر یک Action هست به تابع Reducer ارسال میشه, یا در اصطلاح dispatch میشه.
درباره Event در بحث پیاده سازی Bloc بیشتر صحبت کردیم.
بر اساس این که چه نوع اکشنی ارسال شده باشه بخش Reducer میاد و State موجود در Store را بروزرسانی می کند.
همچنین هر زمان که State جدیدی در Store قرار بگیرد View ما دوباره ساخته می شود.
با استفاده از الگوی Redux اکثر کامپوننت ها از هم جدا شده و بروزرسانی رابط کاربری برنامه آسان تر می شود.
در واقع فقط بخش منطقی برنامه در Reducer قرار میگیره, این تابع اکشن و مقدار فعلی State اپلیکیشن و دریافت میکند و یک آبجکت جدیدی از State برمیگرداند.
خب تا به اینجا درباره Redux صحبت شد و هیچ مشکلی وجود نداشت, اما اگر در برنامه خود نیاز به یک بخش عملیات غیر همزمان داشته باشیم, مانند دریافت اطلاعات از اینترنت. در این حالت چه کار باید کنیم؟
برای حل این مشکل از کامپوننتی به نام Middleware استفاده خواهیم کرد.
این کامپوننت اکشن ها را قبل از رسیدن به Reducer بررسی می کند.
همچنین اکشن و مقدار فعلی State اپلیکیشن را نیز دریافت می کند و میتواند با کتابخانه ها یا API های خارجی ارتباط برقرار کند. در نهایت این Middleware هست که تصمیم میگیره اکشن مورد نظر را به Reducer اصلی متصل کند یا خیر.
ریداکس Redux در Flutter
برای پیاده سازی Redux در فلاتر ما دو پکیج بسیار با ارزش داریم که میتونن کارمون و آسون تر کنند.
برای درک بیشتر بهتره یک مثال عملی با همدیگه کار کنیم.
در این مثال پیاده سازی یک اپلیکیشن لیست انجام کار یا همون TODO List و انتخاب کردیم.
کدهای زیر مربوط به فایل main می باشد.
در این فایل ما بخش Store را تعریف کردیم که شامل سه عضو State, تابع Reducer و Middleware می باشد.
در بخش لایه برنامه نیز از ویجت MaterialApp استفاده کردیم داخل یک StoreProvider قرار دارد. این ویجت به عنوان پارامتر store دریافت می کند که میتواند آن را در اختیار ویجت های فرزند خود قرار دهد.
کلاس AppState شامل لیست آیتم های کارهای مورد نیاز برای انجام هست و همچنین یک فیلد دیگر دارد که مشخص می کند متن اضافه کردن آیتم نمایش داده شود یا خیر.
برای نمایش لیست آیتم ها از کلاسی از نوع ViewModel کمک میگیریم. این کلاس شامل یک View از اطلاعات مشخصی هست که نیاز داریم نمایش دهیم با توجه به اکشن هایی که کاربر ایجاد می کند.
در حقیقت این کلاس از طریق Store ساخته شده است.
حالا ما میتونیم از کلاس ViewModel خودمون استفاده کنیم.
توجه داشته باشید که ما ویجت های خودمون و داخل StoreConnector قرار میدیم که بهمون اجازه میده تا کلاس ViewModel و از Store ایجاد کنیم.
در کدهای بالا ما مشخص کردیم که کاربر وقتی بروی دکمه Add کلیک کند یک اکشن جدید از نوع DisplayListWithNewItemAction ارسال شود.
این اکشن باعث میشود که State برنامه تغییر کند و یک TextField به کاربر نمایش دهد تا آیتم جدیدی ثبت کند.
کلاس اکشن به شکل زیر تعریف می شود.
و این هم Reducer مربوط به این اکشن.
منبع:مرجع فارسی فلاتر
