Flutter日志记录与Redux调试插件redux_logging的使用

redux_logging

redux_logging连接了一个Logger到一个Redux Store。它也可以简单地打印最新的状态和动作变化。

默认情况下，这个类不会在你的控制台或终端上打印任何内容，也不会将数据发送到类似Fabric或Sentry这样的Web服务。它只是将条目记录到一个Logger实例中。

如果你想简单地将最新的动作和状态打印到你的控制台或终端，可以创建一个new LoggingMiddleware.printer()并将其传递给Store创建时。

如果你希望对日志数据的发送位置有更多的控制权，你可以监听你的Logger的onRecord Stream。

Dart 版本

• Dart 1 支持: 0.1.x
• Dart 2 支持: 0.2.x+

简单打印示例

如果你想要一种简单的方法来打印分发的动作到你的控制台/终端，可以使用new LoggingMiddleware.printer()工厂方法。

注意: LoggingMiddleware需要是中间件列表中的最后一个。

import "package:redux/redux.dart";
import 'package:redux_logging/redux_logging.dart';

final store = new Store<int>(
  (int state, dynamic action) => state + 1,
  initialValue: 0,
  // 注意LoggingMiddleware应该放在中间件列表的最后!
  middleware: [myOtherMiddleware, new LoggingMiddleware.printer()]
);

store.dispatch("Hi"); // 打印 {Action: "Hi", Store: 1, Timestamp: ...}

示例

如果你只想将动作记录到一个Logger，并且选择如何处理输出，可以使用默认构造函数。

import 'package:logging/logging.dart';
import "package:redux/redux.dart";
import 'package:redux_logging/redux_logging.dart';

// 创建你自己的Logger
final logger = new Logger("Redux Logger");

// 将其传递给你的中间件
final middleware = new LoggingMiddleware(logger: logger);
final store = new Store<int>(
  (int state, dynamic action) => state + 1,
  initialState: 0,
  middleware: [middleware],
);

// 注意：监听一个logger实例的一个特点是，实际上你是在监听*所有*logger的单例实例。
logger.onRecord
  // 过滤出发送到你的logger实例的[LogRecord]
  .where((record) => record.loggerName == logger.name)
  // 打印它们（或者做一些更有趣的事情！）
  .listen((loggingMiddlewareRecord) => print(loggingMiddlewareRecord));

格式化日志消息

这个库自带两个格式化程序：

• LoggingMiddleware.singleLineFormatter
• LoggingMiddleware.multiLineFormatter

你可以通过实现自己的MessageFormatter并将其传递给LoggingMiddleware构造函数来可选地控制将要记录的消息的格式。它是一个简单的函数，接受三个参数：State、Action和Timestamp。

格式化示例

import "package:redux/redux.dart";
import 'package:redux_logging/redux_logging.dart';

// 创建一个只打印分发动作的格式化器
String onlyLogActionFormatter<State>(
  State state,
  dynamic action,
  DateTime timestamp,
) {
  return "{Action: $action}";
}

// 使用格式化器创建你的中间件。
final middleware = new LoggingMiddleware(formatter: onlyLogActionFormatter);

// 将带有格式化器的中间件添加到你的Store
final store = new Store<int>(
  (int state, dynamic action) => state + 1,
  initialState: 0,
  middleware: [middleware],
);

完整示例Demo

为了提供一个完整的演示，以下是一个整合了上述所有概念的完整Flutter应用示例。

import 'package:flutter/material.dart';
import 'package:redux/redux.dart';
import 'package:redux_logging/redux_logging.dart';
import 'package:logging/logging.dart';

void main() {
  // 创建你自己的Logger
  final logger = Logger('Redux Logger');

  // 创建一个格式化器，以便自定义日志输出
  String customFormatter<State>(State state, dynamic action, DateTime timestamp) {
    return "Custom Log - Action: $action, State: $state, Timestamp: $timestamp";
  }

  // 创建中间件
  final middleware = LoggingMiddleware(
    logger: logger,
    formatter: customFormatter,
  );

  // 创建Store
  final store = Store<int>(
    (int state, dynamic action) => state + 1,
    initialState: 0,
    middleware: [middleware],
  );

  // 监听日志记录
  logger.onRecord.listen((record) {
    if (record.loggerName == logger.name) {
      print(record.message);
    }
  });

  runApp(MyApp(store: store));
}

class MyApp extends StatelessWidget {
  final Store<int> store;

  MyApp({required this.store});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Redux Logging Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('Redux Logging Demo')),
        body: ReduxLoggingDemo(store: store),
      ),
    );
  }
}

class ReduxLoggingDemo extends StatefulWidget {
  final Store<int> store;

  ReduxLoggingDemo({required this.store});

  @override
  _ReduxLoggingDemoState createState() => _ReduxLoggingDemoState();
}

class _ReduxLoggingDemoState extends State<ReduxLoggingDemo> {
  @override
  void initState() {
    super.initState();
    widget.store.dispatch("Initial Dispatch");
  }

  void _incrementCounter() {
    widget.store.dispatch("Increment Counter");
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            'You have pushed the button this many times:',
          ),
          Text(
            '${widget.store.state}',
            style: Theme.of(context).textTheme.headline4,
          ),
          ElevatedButton(
            onPressed: _incrementCounter,
            child: Text('Increment'),
          ),
        ],
      ),
    );
  }
}

在这个完整的示例中，我们创建了一个简单的Flutter应用程序，它使用Redux管理状态，并通过redux_logging插件记录每个动作和状态的变化。每当点击“Increment”按钮时，都会触发一个动作，该动作会增加状态值，并且日志会被打印出来。