Flutter状态管理插件ajwah_bloc的使用

ajwah_bloc

ajwah_bloc 是一个用于实现 BLoC 模式的 Dart 包。每个 StateController 都具有以下功能：

• 分发操作
• 过滤操作
• 添加效果
• 控制器之间的通信
• 完整的 RxDart 功能

请查看 示例 。示例包含 counter 和 todos 页面，这些页面演示了所有功能。

CounterState

import 'package:ajwah_bloc/ajwah_bloc.dart';
import 'package:example/widgets/StreamConsumer.dart';
import 'package:rxdart/rxdart.dart';

class CounterState extends StateController<int> {
  CounterState() : super(0);

  @override
  void onInit() {
    // 当接收到 'asyncInc' 类型的操作时，延迟 1 秒后将状态增加 1
    mapActionToState([
      action$
          .whereType('asyncInc')
          .delay(const Duration(seconds: 1))
          .map((event) => state + 1),
    ]);
  }

  // 增加状态值
  void inc() => emit(state + 1);

  // 减少状态值
  void dec() => emit(state - 1);

  // 返回当前状态值
  Stream<SCResponse> get count$ =>
      Rx.merge([
        action$.whereType('asyncInc').mapTo(SCLoading()),
        stream$.map((data) => data > 10
            ? SCError('Counter is out of the range.')
            : SCData('$data')),
      ]);
}

TodoState

import 'package:ajwah_bloc/ajwah_bloc.dart';
import 'package:rxdart/rxdart.dart';

import '../api/todoApi.dart';
import './searchCategory.dart';

class TodoState extends StateController<List<Todo>> {
  TodoState() : super([]);

  @override
  void onInit() {
    loadTodos();
    /**
     * 对于 todo 搜索输入的效果。每次按键都会从 AddTodo 小部件分发 SearchInputAction。
     * 但效果会将其节流到 320 毫秒以收集后续操作，并最终分发 SearchTodoAction。
     */
    registerEffects([
      action$
          .isA<SearchInputAction>()
          .debounceTime(const Duration(milliseconds: 320))
          .map((action) => SearchTodoAction(action.searchText))
    ]);
  }

  // 加载待办事项
  void loadTodos() {
    getTodos().listen((todos) {
      emit(todos);
    });
  }

  // 添加新的待办事项
  void add(String description) {
    addTodo(Todo(description: description))
        .listen((todo) => emit([...state, todo]));
  }

  // 更新待办事项
  void update(Todo todo) {
    updateTodo(todo).listen(
        (todo) => emit([
              for (var item in state)
                if (item.id == todo.id) todo else item,
            ]), onError: (error) {
      dispatch(TodoErrorAction(error));
    });
  }

  // 删除待办事项
  void remove(Todo todo) {
    removeTodo(todo).listen(
        (todo) => emit(state.where((item) => item.id != todo.id).toList()));
  }

  // 获取活动待办事项信息
  Stream<String> get activeTodosInfo$ =>
      stream$
          .map((todos) => todos.where((todo) => !todo.completed).toList())
          .map((todos) => '${todos.length} items left');

  // 结合多个控制器（TodoState, SearchCategoryState）并返回单个待办事项流
  Stream<List<Todo>> get todo$ =>
      Rx.combineLatest3<List<Todo>, SearchCategory, String, List<Todo>>(
          stream$,
          remoteStream<SearchCategoryState, SearchCategory>(),
          action$
              .isA<SearchTodoAction>()
              .map<String>((action) => action.searchText)
              .doOnData((event) {
            print('searchText: ' + event);
          }).startWith(''), (todos, category, searchText) {
        if (searchText.isNotEmpty)
          todos = todos
              .where((todo) => todo.description
                  .toLowerCase()
                  .contains(searchText.toLowerCase()))
              .toList();
        switch (category) {
          case SearchCategory.Active:
            return todos.where((todo) => !todo.completed).toList();
          case SearchCategory.Completed:
            return todos.where((todo) => todo.completed).toList();
          default:
            return todos;
        }
      });
}

// 待办事项错误动作
class TodoErrorAction extends Action {
  final dynamic error;
  TodoErrorAction(this.error);
}

// 搜索待办事项动作
class SearchTodoAction extends Action {
  final String searchText;
  SearchTodoAction(this.searchText);
}

// 搜索输入动作
class SearchInputAction extends Action {
  final String searchText;
  SearchInputAction(this.searchText);
}

SearchCategoryState

import 'package:ajwah_bloc/ajwah_bloc.dart';

enum SearchCategory { All, Active, Completed }

class SearchCategoryState extends StateController<SearchCategory> {
  SearchCategoryState() : super(SearchCategory.All);

  // 设置搜索类别
  void setCategory(SearchCategory category) => emit(category);
}

Consuming State

final controller = CounterStateController();

class CounterWidget extends StatelessWidget {
  const CounterWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            child: Text('inc'),
            onPressed: controller.inc,
          ),
          ElevatedButton(
            child: Text('dec'),
            onPressed: controller.dec,
          ),
          ElevatedButton(
            child: Text('async(+)'),
            onPressed: controller.asyncInc,
          ),
          StreamBuilder(
            stream: controller.count$,
            initialData: '',
            builder: (context, snapshot) => Text(snapshot.data.toString())
          ),
        ],
      ),
    );
  }
}

Testing

void main() {
  CounterStateController? controller;
  setUp(() {
    controller = CounterStateController();
  });

  tearDown(() {
    controller?.dispose();
  });

  ajwahTest<int>(
    'Initial state',
    build: () => controller!.stream$,
    expect: [isA<int>()],
    verify: (state) {
      expect(state[0], 0);
    },
  );

  ajwahTest<int>(
    'increment',
    build: () => controller!.stream$,
    act: () => controller?.increment(),
    skip: 1,
    expect: [isA<int>()],
    verify: (state) {
      expect(state[0], 1);
    },
  );

  ajwahTest<int>(
    'decrement',
    build: () => controller!.stream$,
    act: () => controller?.decrement(),
    skip: 1,
    expect: [isA<int>()],
    verify: (state) {
      expect(state[0], -1);
    },
  );
}

API

  Actions get action$  // 获取操作流
  void dispatch(Action action)  // 分发操作
  void onAction(Action action)  // 处理操作
  void onInit()  // 初始化方法
  S get state  // 获取当前状态
  Stream<S> get stream$  // 获取状态流
  Stream<T> select<T>(T Function(S state) mapCallback)  // 选择状态
  void emit(S newState)  // 发射新状态
  void registerEffects(Iterable<Stream<Action>> callbackList)  // 注册效果
  void importState(S state)  // 导入状态
  Stream<Controller> remoteController<Controller>()  // 远程控制器
  Future<State> remoteState<Controller, State>()  // 远程状态
  Stream<S> remoteStream<Controller, S>()  // 远程状态流
  void mapActionToState(Iterable<Stream<S>> callbackList)  // 映射操作到状态
  void dispose()  // 销毁

示例代码

import 'package:example/states/counter.dart';
import 'package:flutter/material.dart';
import 'package:get/instance_manager.dart';
import 'package:get/route_manager.dart';

import './states/todo.dart';
import './pages/counterPage.dart';
import './pages/todoPage.dart';
import './states/searchCategory.dart';

void main() {
  runApp(GetMaterialApp(
    smartManagement: SmartManagement.keepFactory,
    debugShowCheckedModeBanner: false,
    getPages: [
      GetPage(
          name: '',
          page: () => CounterPage(),
          binding: BindingsBuilder(() {
            Get.lazyPut(() => CounterState());
          })),
      GetPage(
          name: '/todo',
          page: () => TodoPage(),
          transition: Transition.zoom,
          binding: BindingsBuilder(() {
            Get.put<TodoState>(TodoState(), permanent: true);
            Get.put<SearchCategoryState>(SearchCategoryState(), permanent: true);
          }))
    ],
    initialRoute: '',

    ///home: CounterPage(),
  ));
}