V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
lijy91
V2EX  ›  分享创造

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

  •  
  •   lijy91 · 2019-03-18 08:28:14 +08:00 · 3840 次点击
    这是一个创建于 1838 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    相关链接

    4 条回复    2019-03-18 11:03:06 +08:00
    huclengyue
        1
    huclengyue  
       2019-03-18 09:05:50 +08:00 via Android
    有个疑问。这个跟自带的调试有什么区别,还有用 Androidx 兼容性很不好啊。毕竟公司 app 一般都是混合开发,以前的代码都不支持 Androidx
    kooze
        2
    kooze  
       2019-03-18 10:00:17 +08:00
    @huclengyue 回答楼上的,这个多了 redux 的中间件,对每一个驱动 view 的 action 都能够清楚的查看调试。

    最近刚好在弄 flutter,也刚好在用 fish_redux。感谢楼主。下载试试看。
    lijy91
        3
    lijy91  
    OP
       2019-03-18 11:00:04 +08:00
    @kooze fish_redux 对于中小项目来说还是非常的重。
    kooze
        4
    kooze  
       2019-03-18 11:03:06 +08:00
    @lijy91 是的,不过中小型也没有那么多复杂的状态去管理。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5270 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 09:21 · PVG 17:21 · LAX 02:21 · JFK 05:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.