آموزش پیاده سازی Redux در فلاتر

در برنامه نویسی فلاتر یکی از مباحث مهمی که وجود دارد مدیریت State هست.

برای انجام این کار هم روش ها و پکیج های مختلفی وجود داره, اما به طور کلی راه های مدیریت State فلاتر عموما شامل موارد زیر می شود:

1. BLoC
2. Redux
3. Inherited Widget
4. Inherited Model
5. Scoped Model

در مورد پیاده سازی Bloc در Flutter به طور کامل صحبت کردیم.

بنابر این در این مطلب با مقدمات پیاده سازی الگوی Redux آشنا میشیم.

Redux معماری است که به همراه جریان یکطرفه اطلاعات باعث میشود که توسعه برنامه آسان تر از قبل شود.

ریداکس از بخش های مهم زیر تشکیل شده است که در ادامه به بررسی هر یک میپردازیم.

• Store
• Action
• Reducer
• View

برای درک بهتر میتونید از تصویر زیر کمک بگیرید.

در 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 در فلاتر ما دو پکیج بسیار با ارزش داریم که میتونن کارمون و آسون تر کنند.

flutter_redux

redux

برای درک بیشتر بهتره یک مثال عملی با همدیگه کار کنیم.

در این مثال پیاده سازی یک اپلیکیشن لیست انجام کار یا همون TODO List و انتخاب کردیم.

کدهای زیر مربوط به فایل main می باشد.

در این فایل ما بخش Store را تعریف کردیم که شامل سه عضو State, تابع Reducer و Middleware می باشد.

در بخش لایه برنامه نیز از ویجت MaterialApp استفاده کردیم داخل یک StoreProvider قرار دارد. این ویجت به عنوان پارامتر store دریافت می کند که میتواند آن را در اختیار ویجت های فرزند خود قرار دهد.

 
void main() => runApp(ToDoListApp());

class ToDoListApp extends StatelessWidget {
  final Store store = Store(
    appReducer, /* Function defined in the reducers file */
    initialState: AppState.initial(),
    middleware: createStoreMiddleware(),
  );

  @override
  Widget build(BuildContext context) => StoreProvider(
        store: this.store,
        child: MaterialApp(
          // Omitting some boilerplate here
          home: ToDoListPage(title: 'Flutter Demo Home Page'),
        ),
      );
}

کلاس AppState شامل لیست آیتم های کارهای مورد نیاز برای انجام هست و همچنین یک فیلد دیگر دارد که مشخص می کند متن اضافه کردن آیتم نمایش داده شود یا خیر.

 
class AppState {
  final List toDos;
  final ListState listState;

  AppState(this.toDos, this.listState);

  factory AppState.initial() => AppState(List.unmodifiable([]), ListState.listOnly);
}

enum ListState {
  listOnly, listWithNewItem
}

برای نمایش لیست آیتم ها از کلاسی از نوع ViewModel کمک میگیریم. این کلاس شامل یک View از اطلاعات مشخصی هست که نیاز داریم نمایش دهیم با توجه به اکشن هایی که کاربر ایجاد می کند.

در حقیقت این کلاس از طریق Store ساخته شده است.

 class _ViewModel {
  final String pageTitle;
  final List<_ItemViewModel> items;
  final Function onNewItem;
  final String newItemToolTip;

  _ViewModel(this.pageTitle, this.items, this.onNewItem, this.newItemToolTip, this.newItemIcon);

  factory _ViewModel.create(Store store) {
    List<_ItemViewModel> items = store.state.toDos
        .map((ToDoItem item) => /* Omitting some boilerplate here */)
        .toList();

    return _ViewModel('To Do', items, () => store.dispatch(DisplayListWithNewItemAction()), 'Add new to-do item', Icons.add);
  }
}

حالا ما میتونیم از کلاس ViewModel خودمون استفاده کنیم.

توجه داشته باشید که ما ویجت های خودمون و داخل StoreConnector قرار میدیم که بهمون اجازه میده تا کلاس ViewModel و از Store ایجاد کنیم.

 class ToDoListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => StoreConnector(
        converter: (Store store) => _ViewModel.create(store),
        builder: (BuildContext context, _ViewModel viewModel) => Scaffold(
              appBar: AppBar(
                title: Text(viewModel.pageTitle),
              ),
              body: ListView(children: viewModel.items.map((_ItemViewModel item) => _createWidget(item)).toList()),
              floatingActionButton: FloatingActionButton(
                onPressed: viewModel.onNewItem,
                tooltip: viewModel.newItemToolTip,
                child: Icon(viewModel.newItemIcon),
              ),
            ),
      );
}

در کدهای بالا ما مشخص کردیم که کاربر وقتی بروی دکمه Add کلیک کند یک اکشن جدید از نوع DisplayListWithNewItemAction ارسال شود.

این اکشن باعث میشود که State برنامه تغییر کند و یک TextField به کاربر نمایش دهد تا آیتم جدیدی ثبت کند.

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

 
class DisplayListWithNewItemAction {}

و این هم Reducer مربوط به این اکشن.

 AppState appReducer(AppState state, action) => AppState(toDoListReducer(state.toDos, action), listStateReducer(state.listState, action));

final Reducer> toDoListReducer = // Boilerplate ignored
final Reducer listStateReducer = combineReducers([
  TypedReducer(_displayListOnly),
  TypedReducer(_displayListWithNewItem),
]);

ListState _displayListOnly(ListState listState, DisplayListOnlyAction action) => ListState.listOnly;

ListState _displayListWithNewItem(ListState listState, DisplayListWithNewItemAction action) => ListState.listWithNewItem;