闲鱼团队在前不久发布了 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-plugin-reduxinspector 插件安装到本机。
运行开发版(测试发现生产版无法动态加载 flipper-plugin-reduxinspector )
$ git clone https://github.com/facebook/flipper.git
$ cd flipper
$ yarn
$ yarn start
如果您对此项目有任何建议或疑问,可以通过 Telegram 或我的微信进行讨论。
[图片上传失败...(image-c92790-1552837174161)]
1
huclengyue 2019-03-18 09:05:50 +08:00 via Android
有个疑问。这个跟自带的调试有什么区别,还有用 Androidx 兼容性很不好啊。毕竟公司 app 一般都是混合开发,以前的代码都不支持 Androidx
|
2
kooze 2019-03-18 10:00:17 +08:00
@huclengyue 回答楼上的,这个多了 redux 的中间件,对每一个驱动 view 的 action 都能够清楚的查看调试。
最近刚好在弄 flutter,也刚好在用 fish_redux。感谢楼主。下载试试看。 |