Flutter数据流管理插件dataflow的使用

Flutter数据流管理插件dataflow的使用

1. 整理后的内容中关于“Flutter数据流管理插件dataflow的使用”的完整示例demo

// main.dart
import 'package:dataflow/dataflow.dart';
import 'package:example/store.dart';
import 'package:flutter/material.dart';

import 'login_widget.dart';
import 'todo_widget.dart';

void main() {
  final store = AppStore();
  DataFlow.init(store);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final store = DataFlow.getStore<AppStore>();
    return MaterialApp(
      home: store.isLoggedIn ? TodoScreen() : LoginScreen(),
    );
  }
}

2. 关于“Flutter数据流管理插件dataflow的使用”的对应内容

DataFlow 是一个强大的且灵活的状态管理库，适用于 Flutter 应用程序。 它提供了一种简单直观的方式来管理和处理应用程序中的数据流动和异步操作。通过 DataFlow,你可以轻松定义动作、跟踪其状态，并根据需要更新 UI。

DataFlow 设计得轻量级、高效且易于使用。它利用 Dart 流并遵循响应式编程范式来确保流畅的数据流动和无缝的 UI 更新。

关键功能：

• DataStore: 中央化的状态管理器。
• DataAction: 定义异步操作的动作，具有可定制的执行逻辑。
• DataSync: 基于 DataStore 的重建其后代的组件。
• DataSyncNotifier: 当特定 DataActions 发生时通知监听者。
• Middleware: 拦截并在执行前后修改动作。
• DataChain: 执行一个动作后基于结果执行另一个动作。

比较表：

入门指南：

1. 在你的 pubspec.yaml 文件中添加 dataflow 包：

   dependencies:
     dataflow: ^1.4.0
   

2. 在你的 Dart 代码中导入包：

   import 'package:dataflow/dataflow.dart';
   

3. 初始化 DataFlow 并传入 DataStore：

   void main() {
     DataFlow.init(MyDataStore());
     runApp(MyApp());
   }
   

4. 定义你的 DataActions：

   class FetchDataAction extends DataAction<MyDataStore> {
     @override
     dynamic execute() async {
       // 数据获取逻辑
       await Future.delayed(Duration(seconds: 2));
       print('Fetched Data');
     }
   }
   

5. 使用 DataSync 在你的组件中：

   class MyHomePage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: Text('DataFlow Example')),
         body: DataSync<MyDataStore>(
           actions: {FetchDataAction},
           loadingBuilder: (context) {
             return const Center(child: CircularProgressIndicator());
           },
           errorBuilder: (context, error) {
             return Center(child: Text('An error occurred: $error'));
           },
           builder: (context, store, hasData) {
             return LoginScreen();
           },
         ),
       });
   }
   

6. 从 UI 触发动作：

   ElevatedButton(
     onPressed: () {
       FetchDataAction();
     },
     child: Text('Fetch Data'),
   ),
   

DataAction：

一个 DataAction 表示应用中的异步操作。它封装了执行逻辑，并提供一种跟踪动作状态的方式。

要定义一个 DataAction，创建一个扩展 DataAction 类的类并实现 execute 方法：

class FetchDataAction extends DataAction {
  @override
  dynamic execute() async {
    // 数据获取逻辑
    await Future.delayed(Duration(seconds: 2));
    print('Fetched Data');
  }
}

触发 DataAction 可以直接调用它：

FetchDataAction();

DataActions 可以通过 next 方法进行链式调用：

FetchDataAction().next(() => ProcessDataAction());

DataStore：

一个 DataStore 是应用状态的集中存储库。它扩展 DataStore 类并可以包含任何相关的应用数据。

要创建一个 DataStore，定义一个扩展 DataStore 的的类：

class MyDataStore extends DataStore {
  // 应用状态
  String data = '';
}

可以从应用中的任何地方访问 DataStore 使用 DataFlow.getStore 方法：

final store = DataFlow.getStore<MyDataStore>();
or
final store = context.getStore<MyDataStore>();

DataFlow：

DataFlow 是核心类，管理动作流并通知状态变化的监听者。初始化 DataFlow 时传入 DataStore 和可选的中间件：

void main() {
  DataFlow.init(MyDataStore());
  runApp(MyApp());
}

DataFlow 提供事件流通过 DataFlow.events 属性。可以通过监听此流来响应动作事件：

DataFlow.events.listen((action) {
  // 处理动作事件
});

DataSync：

DataSync 是一个组件，根据 DataStore 的状态重建其后代。它监听特定的动作并根据状态更新 UI。

使用 DataSync，将你的组件树包裹在 DataSync 组件中并提供构建函数：

DataSync<AppStore>(
  useDefaultWidgets: true,
  loadingBuilder: (context) {
    return const Center(child: CircularProgressIndicator());
  },
  errorBuilder: (context, error) {
    return Center(child: Text('An error occurred: $error'));
  },
  builder: (context, store, hasData) {
    return store.isLoggedIn ? TodoScreen() : LoginScreen();
  },
  actions: const {LoginAction},
);

构建函数接收上下文、DataStore 和动作状态。你可以根据状态构建 UI 或使用 ::useDefaultWidgets:: 属性。

DataSyncNotifier：

DataSyncNotifier 是一个组件，当特定动作发生时通知监听者。它用于执行副作用或根据动作状态触发额外动作。

使用 DataSyncNotifier，将你的组件树包裹在 DataSyncNotifier 组件中并提供动作及其对应的监听器映射：

DataSyncNotifier(
  actions: {
    FetchDataAction: (context, store, status) {
      // 处理动作状态
      if (status == DataActionStatus.success) {
        // 执行额外动作或副作用
      }
    },
  },
  child: MyChildWidget(),
),

监听器将在动作状态发生变化时被调用，允许你对状态变化做出反应。

Middleware：

Middleware 允许拦截并在执行前后修改动作。它提供了一种添加自定义逻辑、日志记录或错误处理到动作的方法。

要创建 Middleware，定义一个扩展 DataMiddleware 的的类并实现 preDataAction 和 postDataAction 方法：

class LoggingMiddleware extends DataMiddleware {
  @override
  bool preDataAction(DataAction dataAction) {
    print('Starting action: ${dataAction.runtimeType}');
    return true;
  }

  @override
  void postDataAction(DataAction dataAction) {
    print('Finished action: ${ dataAction.runtimeType} with status ${ dataAction.status}');
  }
}

preDataAction 方法在动作执行前被调用，postDataAction 方法在动作执行后被调用。

向 DataFlow 初始化传递 Middleware 列表：

void main() {
  DataFlow.init(MyDataStore(), middlewares: [LoggingMiddleware()]);
  runApp(MyApp());
}

错误处理：

DataFlow 提供内置的动作错误处理。如果在动作执行期间发生异常，动作的状态将设置为 DataActionStatus.error，错误可通过 error 属性获取。

在 UI 中处理错误可以通过检查动作状态并显示适当的错误消息：