闲鱼团队在前不久发布了 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)]
