Flutter副作用管理插件side_effect_bloc的使用

side_effect_bloc 是一个扩展了 bloc 的插件，它提供了一个单独的流来处理那些应该只被消费一次的事件。这使得你可以将与导航、Toast/Snackbar 消息等相关的事件从 bloc 的状态中分离出来。

使用方法

声明 Bloc

添加 Mixin 到现有的 Bloc

class FeatureBloc extends Bloc<FeatureEvent, FeatureState>
    with SideEffectBlocMixin<FeatureEvent, FeatureState, FeatureSideEffect> {
  FeatureBloc() : super(FeatureState.initial());
}

继承自 Bloc

class FeatureBloc extends SideEffectBloc<FeatureEvent, FeatureState, FeatureSideEffect> {
  FeatureBloc() : super(FeatureState.initial());
}

发射副作用

class FeatureBloc extends SideEffectBloc<FeatureEvent, FeatureState, FeatureSideEffect> {
  FeatureBloc() : super(FeatureState.initial()) {
    on<ItemClick>(
      (event, emit) {
        produceSideEffect(FeatureSideEffect.openItem(event.id));
      },
    );
  }
}

监听副作用

// feature_view.dart
BlocSideEffectListener<FeatureBloc, FeatureSideEffect>(
  listener: (BuildContext context, FeatureSideEffect sideEffect) {
    sideEffect.when(
      goToNext: () => Navigator.of(context).pushNamed("/sub"),
      openSnackbar: () {
        const snackBar = SnackBar(
          content: Text('Yay! A SnackBar!'),
        );
        ScaffoldMessenger.of(context).showSnackBar(snackBar);
      },
    );
  },
  child: ...,
)

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 side_effect_bloc。

main.dart

import 'package:flutter/material.dart';
import 'package:side_effect_bloc/side_effect_bloc.dart';
import 'feature_bloc.dart';
import 'feature_view.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Side Effect Bloc Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FeatureView(),
    );
  }
}

feature_bloc.dart

import 'package:bloc/bloc.dart';
import 'package:side_effect_bloc/side_effect_bloc.dart';
import 'feature_event.dart';
import 'feature_state.dart';
import 'feature_side_effect.dart';

class FeatureBloc extends SideEffectBloc<FeatureEvent, FeatureState, FeatureSideEffect> {
  FeatureBloc() : super(FeatureState.initial()) {
    on<ItemClick>(
      (event, emit) {
        produceSideEffect(FeatureSideEffect.openItem(event.id));
      },
    );
  }
}

feature_event.dart

part of 'feature_bloc.dart';

abstract class FeatureEvent {}

class ItemClick extends FeatureEvent {
  final int id;

  ItemClick(this.id);
}

feature_state.dart

part of 'feature_bloc.dart';

class FeatureState {
  static FeatureState initial() {
    return FeatureState();
  }

  // Add your state properties here
}

feature_side_effect.dart

part of 'feature_bloc.dart';

abstract class FeatureSideEffect {}

class OpenItem extends FeatureSideEffect {
  final int id;

  OpenItem(this.id);
}

class GoToNext extends FeatureSideEffect {}

class OpenSnackbar extends FeatureSideEffect {}

feature_view.dart

import 'package:flutter/material.dart';
import 'package:side_effect_bloc/side_effect_bloc.dart';
import 'feature_bloc.dart';
import 'feature_event.dart';

class FeatureView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => FeatureBloc(),
      child: Scaffold(
        appBar: AppBar(
          title: Text('Side Effect Bloc Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              context.read<FeatureBloc>().add(ItemClick(1));
            },
            child: Text('Click Me'),
          ),
        ),
      ),
    );
  }
}

feature_side_effect_listener.dart

import 'package:flutter/material.dart';
import 'package:side_effect_bloc/side_effect_bloc.dart';
import 'feature_bloc.dart';
import 'feature_side_effect.dart';

class FeatureSideEffectListener extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocSideEffectListener<FeatureBloc, FeatureSideEffect>(
      listener: (BuildContext context, FeatureSideEffect sideEffect) {
        sideEffect.when(
          openItem: (id) => Navigator.of(context).pushNamed("/sub"),
          goToNext: () => Navigator.of(context).pushNamed("/next"),
          openSnackbar: () {
            const snackBar = SnackBar(
              content: Text('Yay! A SnackBar!'),
            );
            ScaffoldMessenger.of(context).showSnackBar(snackBar);
          },
        );
      },
      child: FeatureView(),
    );
  }
}

通过以上示例代码，你可以看到如何在 Flutter 应用中使用 side_effect_bloc 来管理副作用。希望这些示例对你有所帮助！