閑魚團隊在前不久發(fā)布了 fish-redux 應(yīng)用框架，正好之前為 Flutter 寫了一個插件讓 Flutter 可以使用 Facebook 開發(fā)的調(diào)試工具 Flipper 對應(yīng)用進行調(diào)試，然后在之前的基礎(chǔ)上寫了一個類似 redux-devtools 中 Inspector 的工具。
快速開始
現(xiàn)在將手把手教你如何在 fish-redux 官方提供的 todo lists 示例中集成。
安裝
添加以下內(nèi)容到包的 pubspec.yaml 文件中：
dependencies:
flutter_flipperkit: ^0.0.6
flipperkit_fish_redux_middleware: ^0.0.1
根據(jù)示例更改項目的 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'
根據(jù)示例更改項目文件：
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' 方法進行狀態(tài)的序列化：
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方法
運行應(yīng)用
$ flutter run
你可以直接克隆 https://github.com/blankapp/fish_redux_example 進行測試
運行 Flipper Desktop
在些之前，請將 flipper-plugin-reduxinspector 插件安裝到本機。
運行開發(fā)版（測試發(fā)現(xiàn)生產(chǎn)版無法動態(tài)加載 flipper-plugin-reduxinspector）
$ git clone https://github.com/facebook/flipper.git
$ cd flipper
$ yarn
$ yarn start
探討
如果您對此項目有任何建議或疑問，可以通過 Telegram 或我的微信進行討論。
[圖片上傳失敗...(image-c92790-1552837174161)]
