Flutter状态管理与动作触发插件re_state_action的使用

Flutter状态管理与动作触发插件re_state_action的使用

关于

这个包是一个流行的[RxDart]库的封装，通过流简化状态管理。它提供了一个简单的解决方案来有效地处理应用程序状态，并无缝地管理用户界面（UI）和用户之间的交互。通过利用该包的反应式方法，您可以高效地处理诸如对话框、警告、模态等UI组件，同时避免不必要的状态过载。

使用

创建一个简单的ReStateAction类

// 定义一个显示Snackbar的动作接口
abstract class ShowSnackbarAction{}

// 当值为偶数时显示Snackbar的具体动作
class ShowIsEvenValueSnackbarAction extends ShowSnackbarAction{}

// CounterStateAction类负责管理计数器的状态
class CounterStateAction extends ReStateAction<int, ShowSnackbarAction> {
  CounterStateAction({int initialState = 0}) : super(initialState){
    // 在构造函数中添加状态监听器
    listenState((state){
        if(state.isEven){
         emitAction(ShowIsEvenValueSnackbarAction());
        }
    });
  }

  // 增加计数器的值
  void increment() => emitState(state + 1);
  // 减少计数器的值
  void decrement() => emitState(state - 1);
}

在这个示例中，我们利用包创建了一个CounterStateAction类，通过扩展ReStateAction类来管理计数器的状态。在类的构造函数中设置了一个监听器来监控状态变化。当状态变为偶数时，使用emitAction方法发出一个ShowIsEvenValueSnackbarAction类型的动作，这允许您处理事件并显示一个Snackbar或执行其他操作。

使用ReState类管理简单状态

class CounterReState extends ReState<int> {
  CounterReState({int initialState = 0}) : super(initialState);

  void increment() => emitState(state + 1);
  void decrement() => emitState(state - 1);
}

我们可以使用[state]getter访问状态或使用[stateStream]getter访问流。动作只能通过[actionStream]属性访问。状态和动作都是流，可以使用[listenState]和[listenAction]方法进行监听。

在UI中使用ReState类

ReStateWidget<int>(
  reState: counterReState,
  builder: (context, state) {
    return Text('$state');
  },
),

在UI中使用ReStateAction类

ReStateActionWidget<int, ShowSnackbarAction>(
  reState: counterReStateAction,
  onAction: (action) {
    if (action is ShowIsEvenValueSnackbarAction) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text('The value is even'),
        ),
      );
    }
  },
  builder: (context, state, child) {
    return Column(
      children: [
        Text('Current value: $state'),
        TextButton(
          onPressed: () => counterReStateAction.increment(),
          child: Text('Increment'),
        ),
        TextButton(
          onPressed: () => counterReStateAction.decrement(),
          child: Text('Decrement'),
        ),
      ],
    );
  },
),

仅监听动作

ReActionListener<ShowSnackbarAction>(
  reState: counterStateAction,
  onAction: (action) {
    if (action is ShowIsEvenValueSnackbarAction) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text('The value is even'),
        ),
      );
    }
  },
  child: Text('Widget that will not be rebuilt'),
),

Dart 3.0

该包兼容Dart 3.0的新特性，如密封类和模式匹配。要使用这些特性，需要将Flutter版本更新到3.10.0或更高版本，并在pubspec.yaml文件中启用Dart 3.0特性。

environment:
  sdk: ">=3.0.0 <4.0.0"

使用示例：

sealed class ShowSnackbarAction{}

class ShowIsEvenValueSnackbarAction extends ShowSnackbarAction{}

class ShowIsOddValueSnackbarAction extends ShowSnackbarAction{}

class CounterStateAction extends ReStateAction<int, ShowSnackbarAction> {
  CounterStateAction({int initialState = 0}) : super(initialState){
    listenState((state){
        if(state.isEven){
         emitAction(ShowIsEvenValueSnackbarAction());
        }else{
         emitAction(ShowIsOddValueSnackbarAction());
        }
    });
  }

  void increment() => emitState(state + 1);
  void decrement() => emitState(state - 1);
}

//... 在UI中
ReActionListener<ShowSnackbarAction>(
  reState: counterStateAction,
  onAction: (action) {
    final snackbarText = switch (action) {
          ShowIsEvenValueSnackbarAction() => 'The value is even',
          ShowIsOddValueSnackbarAction() => 'The value is odd',
          _ => 'The value is null',
        };
    
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text(snackbarText),
      ),
    );
  },
  child: Text('Widget that will not被重建'),
),

示例

以下是一个完整的示例demo：

import 'package:flutter/material.dart';
import 'package:re_state_action/re_listener_modifiers.dart';
import 'package:re_state_action/re_state_action.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter ReStateAction Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter ReStateAction Demo Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final ReCounterStateActionEvent _reCounterStateActionEvent =
      ReCounterStateActionEvent();

  void _incrementCounter() {
    _reCounterStateActionEvent.process(IncrementCounter());
  }

  void _onCounterAction(ReCounterAction action) {
    ScaffoldMessenger.of(context)
      ..removeCurrentSnackBar()
      ..showSnackBar(
        SnackBar(
          content: Text('Snackbar Color: ${action.colorName}'),
          backgroundColor: action.color,
        ),
      );
  }

  void _onResetCounter() {
    _reCounterStateActionEvent.process(ResetCounter());
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          IconButton(
            icon: const Icon(Icons.refresh),
            onPressed: _onResetCounter,
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            ReStateActionWidget(
              reState: _reCounterStateActionEvent,
              onAction: _onCounterAction,
              buildWhen: (previousState, currentState) {
                return currentState < 15;
              },
              builder: (context, state, child) => Text(
                '$state',
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

class ReCounterStateActionEvent
    extends ReStateActionEvent<int, ReCounterAction, ReCounterEvent> {
  ReCounterStateActionEvent() : super(0) {
    on<IncrementCounter>(
      (event) => _increment(),
      modifier: ReListenerModifiers.throttleTime(const Duration(seconds: 1)),
    );
    on<ResetCounter>(
      (event) => _reset(),
      modifier: ReListenerModifiers.debounceTime(const Duration(seconds: 1)),
    );

    listenState(
      (state) {
        if (state == 0) {
          return;
        } else if (state % 2 == 0) {
          emitAction(const ShowSnackGreen());
        } else {
          emitAction(const ShowSnackRed());
        }
      },
    );
  }

  void _increment() {
    emitState(state + 1);
  }

  void _reset() {
    emitState(0);
    emitAction(const ShowSnackBrown());
  }
}

abstract class ReCounterAction {
  const ReCounterAction(
    this.color,
    this.colorName,
  );
  final Color color;
  final String colorName;
}

class ShowSnackRed extends ReCounterAction {
  const ShowSnackRed() : super(Colors.red, 'Red');
}

class ShowSnackGreen extends ReCounterAction {
  const ShowSnackGreen() : super(Colors.green, 'Green');
}

class ShowSnackBrown extends ReCounterAction {
  const ShowSnackBrown() : super(Colors.brown, 'Brown - Reseting');
}

abstract class ReCounterEvent {}

class ResetCounter extends ReCounterEvent {}

class IncrementCounter extends ReCounterEvent {}