معماری آینده دار Flux در فلاتر

بایک مقاله دیگر از دنیای برنامه نویسی فصل اندروید برگشتیم?

خوب در پست قبلی با این معماری جذاب کمی آشنا شدیم و مثال هایی در کاتلین برای ان زدیم، به درخواست تعداد زیادی از دوستان تصمیم گرفتیم برای فلاتر (این فریمورک جوان و جذاب) هم یک سری توضیح درباره flux و یک سورس در جهت یادگیری آن قرار بدیم

پست قبلی معماری جدید و متفاوت در اندروید

سورس کامل این آموزش در GitHub: ((در انتهای مقاله قرار داده شده است))

یک کتابخانه معماری برنامه دارت با جریان داده یک جهته با الهام از RefluxJS و Facebook’s Flux

این یک پکیچ آزمایشی است و پشتیبانی رسمی تیم Flutter را ندارد. با این حال ، استقبال فراوانی از این معماری جذاب شده!

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

توضیح اجمالی

در واقع flutter_fluxیک الگوی جریان داده یک جهته را اجرا می کند که از Actions، Storesو StoreWatchersتشکیل شده است. این مبتنی بر w_flux است ، اما برای استفاده از Flutter به جای React اصلاح شده است.

یک Actionsجهش داده های برنامه را که در Stores قرار دارند آغاز می کند.
دو جهش داده ها در Stores باعث بازآفرینی نمای برنامه (تعریف شده در StoreWatcher) می شود.
سوم Widgets های Flutter و سایر منابع تعامل Actionsرا در پاسخ به تعامل کاربر ارسال می کنند.
چهارم و چرخه ادامه دارد ...

Flux شامل چه مواردی است

Action

درواقع Actionفرماني است كه مي تواند ارسال شود (با بارگذاري اطلاعاتي اختياري) و گوش داده شود.

در flutter_flux،مورد Actionsتنها عامل اصلی تغییر وضعیت برنامه هستند. اWidgets و اشیا other دیگر Actionsرا در پاسخ به تعامل کاربر با نمای ارائه شده ارسال می کنند. Stores برای این اعزام های Action گوش می دهند و داده های داخلی خود را در پاسخ با استفاده از محموله Actionبه طور مناسب تغییر می دهند.

import 'package:flutter_flux/flutter_flux.dart';

// define an action
final Action<String> displayString = new Action<String>();

// dispatch the action with a payload
displayString('somePayload');

// listen for action dispatches
displayString.listen(_displayAlert);

_displayAlert(String payload) {
  print(payload);
}

BONUS: Actions منتظر هستند!

آنها آینده ای را پس از اتمام تمام شنوندگان Actionثبت شده ، برمی گردانند. معمولاً توصیه نمی شود از این ویژگی در کد نرمال برنامه استفاده کنید ، اما در unit test کاملاً مفید است.

Store

یک Storeیک مخزن و مدیر حالت برنامه است. کلاس پایه Storeارائه شده توسط flutter_fluxباید متناسب با نیازهای برنامه و داده های آن گسترش یابد. بسته به پیچیدگی برنامه و معماری برنامه مورد نظر شما ، حالت برنامه ممکن است در بسیاری از فروشگاههای مستقل پخش شود.

طبق قرارداد ، داده های داخلی Storeمستقیماً قابل تغییر نیست. در عوض ، داده های Storeدر پاسخ به response های Action، تغییر شکل داخلی می دهند. در غیر این صورت باید Storeها فقط خواندنی تلقی شوند ، و داده های مربوطه را فقط از طریق روش های گیرنده در معرض دید عموم قرار می دهند. این دسترسی محدود به داده ها تضمین می کند که یکپارچگی جریان داده های یک جهته حفظ می شود.3

یک Storeرا می توان برای دریافت notification خارجی جهش های داده خود گوش داد. هر زمان داده های درون Storeتغییر داده شود ، از روش triggerبرای آگاه سازی شنوندگان ثبت شده از در دسترس بودن داده های به روز استفاده می شود. در flutter_flux، StoreWatchersبه Storeها گوش می دهند ، به طور معمول رندر مجدد عناصر UI را براساس داده های به روز شده Storeآغاز می کند.

import 'package:flutter_flux/flutter_flux.dart';

class RandomColorStore extends Store { 

 // Public data is only available via getter method
  String _backgroundColor = 'gray';
  String get backgroundColor => _backgroundColor; 

 // Actions relevant to the store are passed in during instantiation
  RandomColorActions _actions;

  RandomColorStore(RandomColorActions this._actions) {
    // listen for relevant action dispatches
    _actions.changeBackgroundColor.listen(_changeBackgroundColor);
  }  

_changeBackgroundColor(_) {
    // action dispatches trigger internal data mutations
    _backgroundColor = '#' + (new Random().nextDouble() * 16777215).floor().toRadixString(16); 

   // trigger to notify external listeners that new data is available
    trigger();
  }
}

BONUS: Stores

یک ترکیب مختصر اختیاری برای action->و data mutation(جهش داده ها) -> trigger operations. فراهم می کنند.

// verbose syntax
actions.incrementCounter.listen(_handleAction);_handleAction(payload) {

    // perform data mutation
    counter += payload;
    trigger();

  }// equivalent terse syntax
triggerOnAction(actions.incrementCounter, (payload) => counter += payload);

مثال ها

نمونه های ساده استفاده از flutter_flux را می توان در دایرکتوری مثال یافت. مثال README شامل دستورالعمل هایی برای ساخت / راه اندازی آنهاست.

مصرف خارجی

در flutter_fluxیک جریان داده یک جهته را در یک برنامه یا ماژول کد جداگانه پیاده سازی می کند. اگر از flutter_fluxبه عنوان معماری داخلی کتابخانه استفاده می شود ، هنگام تعریف API خارجی باید این جریان داده داخلی در نظر گرفته شود.

روش های خارجی API که هدف آن تغییر وضعیت داخلی است ، باید Actionsرا ارسال کند ، دقیقاً مانند هر تعامل کاربر داخلی.
روشهای API خارجی که برای پرس و جو از حالت داخلی در نظر گرفته شده اند ، باید از روشهای موجود فقط در حالت خواندن Storeاستفاده کنند.
جریانهای خارجی API که برای اطلاع رسانی به مصرف کننده در مورد تغییرات وضعیت داخلی در نظر گرفته شده اند ، باید مشابه راه اندازهای آنها از Storesداخلی ارسال شوند.