Flutter性能监控插件saga_monitor的使用

Flutter性能监控插件saga_monitor的使用

Saga Monitor用于监控运行中的saga和效果，以跟踪redux_saga中间件。

插件和安装详情可以在pub.dev找到。

使用示例

根据以下示例修改vanilla_counter以测试监控功能。

输出可以打印到控制台。

index.dart

...
var monitor = SimpleSagaMonitor(
    onLog: consoleMonitorLogger);

var sagaMiddleware = createSagaMiddleware(Options(sagaMonitor: monitor));
...

示例输出

.✓Root, duration:11ms, result:(Task{Running:true, Cancelled:false, Aborted:false, Result:null, Error:null})
.   └─ ✓Fork, duration:4ms, result:(Task{Running:true, Cancelled:false, Aborted:false, Result:null, Error:null})
.       ├─ ✓Take, duration:7553ms, result:(Instance of 'IncrementAsyncAction')
.       ├─ ✓Fork, duration:5ms, result:(Task{Running:true, Cancelled:false, Aborted:false, Result:null, Error:null})
.       │   ├─ ✓Delay, duration:1004ms, result:(true)
.       │   └─ ✓Put, duration:2ms, result:(Instance of 'IncrementAction')
.       └─ ⌛Take

检查vanilla_counter示例的monitor-console分支以获取完整的代码。

要处理日志输出的位置，实现onLog事件。以下示例演示如何获取行并将其输出到HTML页面上的div元素。

index.dart

...
var monitor = SimpleSagaMonitor(
    onLog: (SimpleSagaMonitor monitor) {
      var lines = monitor.getLines();
      String s = '';
      lines.forEach((element) {
        s += element + '<br>';
      });
      querySelector('#monitor').innerHtml = s;
    });

var sagaMiddleware = createSagaMiddleware(Options(sagaMonitor: monitor));
...

index.html

...
<p>
    点击次数: <span id="value">0</span> 次
    <button id="increment">+</button>
    <button id="decrement">-</button>
    <button id="incrementIfOdd">如果奇数则递增</button>
    <button id="incrementAsync">异步递增</button>
    </br>
    </br>
    Saga Monitor: <div id="monitor"></div>
</p>
...

检查vanilla_counter示例的monitor-browser分支以获取完整的代码。

完整示例代码

import 'package:redux/redux.dart';
import 'package:redux_saga/redux_saga.dart';
import 'package:saga_monitor/saga_monitor.dart';

// Reducer方法
// 根据分发的动作更改状态
int counterReducer(int state, dynamic action) {
  if (action is IncrementAction) {
    return state + 1;
  } else if (action is DecrementAction) {
    return state - 1;
  }

  return state;
}

// 动作
class IncrementAction {}

class DecrementAction {}

class IncrementAsyncAction {}

// incrementAsync Saga 延迟增加计数
Iterable incrementAsync({dynamic action}) sync* {
  yield Delay(Duration(seconds: 1));
  yield Put(IncrementAction());
}

// counterSaga 接收每个 IncrementAsyncAction
// 动作并分叉 incrementAsync
Iterable counterSaga() sync* {
  yield TakeEvery(incrementAsync, pattern: IncrementAsyncAction);
}

void main() {
  // 创建中间件
  var sagaMiddleware = createSagaMiddleware(Options(
    // 设置saga监控器
    sagaMonitor: SimpleSagaMonitor(onLog: consoleMonitorLogger),
  ));

  // 创建存储并应用中间件
  final store = Store<int>(
    counterReducer,
    initialState: 0,
    middleware: [applyMiddleware(sagaMiddleware)],
  );

  // 附加存储
  sagaMiddleware.setStore(store);

  // 运行根saga
  sagaMiddleware.run(counterSaga);

  // 订阅存储
  store.onChange.listen(render);

  // 分发一些示例事件
  store.dispatch(IncrementAction());
  store.dispatch(IncrementAction());
  store.dispatch(IncrementAction());

  store.dispatch(DecrementAction());

  store.dispatch(IncrementAsyncAction());

  // 输出:
  // 1
  // 2
  // 3
  // 2
  // 2
  // 3
}

// 此方法可以根据存储数据渲染UI
// 目前它只是在每次更改时打印到控制台
void render(int state) {
  print(state);
}