闲鱼 fish-redux 的非官方可视化调试工具

闲鱼团队在前不久发布了 fish-redux 应用框架，正好之前为 Flutter 写了一个插件让 Flutter 可以使用 Facebook 开发的调试工具 Flipper 对应用进行调试，然后在之前的基础上写了一个类似 redux-devtools 中 Inspector 的工具。

快速开始

现在将手把手教你如何在 fish-redux 官方提供的 todo lists 示例中集成。

安装

添加以下内容到包的 pubspec.yaml 文件中：

dependencies:
  flutter_flipperkit: ^0.0.6
  flipperkit_fish_redux_middleware: ^0.0.1

根据示例更改项目的 ios/Podfile 文件：

+source 'https://github.com/facebook/flipper.git'
+source 'https://github.com/CocoaPods/Specs'
# Uncomment this line to define a global platform for your project
-# platform :ios, '9.0'
+platform :ios, '9.0'

根据示例更改项目文件：

android/app/build.gradle:

android {
-    compileSdkVersion 27
+    compileSdkVersion 28

    defaultConfig {
-        targetSdkVersion 27
+        targetSdkVersion 28
    }
}

android/app/gradle.properties

+android.useAndroidX=true
+android.enableJetifier=true

您可以通过命令行安装软件包：

$ flutter packages get

集成

在程序入口方法中初始化 Flipper

import 'package:flutter/material.dart';
import 'package:flutter_flipperkit/flutter_flipperkit.dart';

void main() async { 
  FlipperClient flipperClient = FlipperClient.getDefault();
  flipperClient.addPlugin(new FlipperReduxInspectorPlugin());
  flipperClient.start();

  runApp(MyApp());
}

// 已省略部分代码

在 lib/todo_list_page/page.dart 中添加 flipperKitFishReduxMiddleware 中间件：

import 'package:fish_redux/fish_redux.dart';
import 'package:flipperkit_fish_redux_middleware/flipperkit_fish_redux_middleware.dart';

import 'effect.dart';
import 'list_adapter/adapter.dart';
import 'reducer.dart';
import 'report_component/component.dart';
import 'state.dart';

import 'view.dart';

class ToDoListPage extends Page<PageState, Map<String, dynamic>> {
  ToDoListPage()
      : super(
          initState: initState,
          effect: buildEffect(),
          reducer: buildReducer(),
          view: buildView,
          dependencies: Dependencies<PageState>(
              adapter: ToDoListAdapter(),
              slots: <String, Dependent<PageState>>{
                'report': ReportConnector() + ReportComponent()
              }),
          middlewares: <Middleware<PageState>>[
            logMiddleware(tag: 'ToDoListPage'),
            flipperKitFishReduxMiddleware(),
          ],
        );
}

在 lib/todo_list_page/state.dart 中添加 'toJson' 方法进行状态的序列化：

import 'package:fish_redux/fish_redux.dart';
import 'report_component/component.dart';
import 'todo_component/component.dart';

class PageState implements Cloneable<PageState> {
  List<ToDoState> toDos;

  @override
  PageState clone() {
    return PageState()..toDos = toDos;
  }

  Map<String, dynamic> toJson() {
    var map = {
      'toDos': toDos,
    };
    return map;
  }
}

// 已省略部分代码

PS. PageState 所引用的 ToDoState 及同样需要添加 toJson 方法

运行应用

$ flutter run

你可以直接克隆 https://github.com/blankapp/fish_redux_example 进行测试

运行 Flipper Desktop

在些之前，请将 flipper-plugin-reduxinspector 插件安装到本机。

运行开发版（测试发现生产版无法动态加载 flipper-plugin-reduxinspector ）

$ git clone https://github.com/facebook/flipper.git
$ cd flipper
$ yarn
$ yarn start

探讨

如果您对此项目有任何建议或疑问，可以通过 Telegram 或我的微信进行讨论。

[图片上传失败...(image-c92790-1552837174161)]

相关链接

• https://github.com/facebook/flipper
• https://github.com/blankapp/flutter_flipperkit
• https://github.com/blankapp/flutter_flipperkit_plugins
• https://github.com/blankapp/flipper-plugin-reduxinspector
• https://github.com/blankapp/fish_redux_example