Flutter用fish_redux踩坑和实战

Fish_redux开发flutter的入门教学

1.Fish_redux的初相识

Fish Redux 是一个基于 Redux 数据管理的组装式 flutter 应用框架， 它特别适用于构建中大型的复杂应用。

它的特点是配置式组装。 一方面我们将一个大的页面，对视图和数据层层拆解为互相独立的 Component|Adapter，上层负责组装，下层负责实现； 另一方面将 Component|Adapter 拆分为 View，Reducer，Effect 等相互独立的上下文无关函数。

所以它会非常干净，易维护，易协作!
我们先看看fish_redux的官方GitHub给出的架构图!

fish_redux架构图.png,来自fish_redux团队的GitHub

1.1 Fish_redux的组成

• Page

page代表一个完整的页面,也就是我们理解的activity或者UIViewController。它由redux里面分层的view、state、reducer、effect、action组成。这就是所谓的组装拔插式...你懂的(#^.^#)

class HomePage extends Page> {
 HomePage()
     : super(
           initState: initState,//生命周期
           effect: buildEffect(),//处理副作用的action
           view: buildView,//界面view
           dependencies: Dependencies(
               adapter: NoneConn() + HomeAdapter(),//高性能的listview适配器
               slots: >{
               }),//用到的挂件,也就是组件components
           middleware: >[
           ],);//oop切片,可以监听某些方法和生命周期的执行

}

• State

state主要用来保存page或者component(页面/组件)的状态或者说属性,用来存放数据。

class HomeState implements Cloneable {
 EasyRefreshController refreshController;
 List list;
 int page;
 @override//必须复写的方法
 HomeState clone() {
   return HomeState()
   ..list = list
   ..refreshController = refreshController
   ..page = page;
 }
}
//初始化状态,也就是给页面的数据初始化等
HomeState initState(Map args) {
 HomeState homeState = HomeState();
 homeState.refreshController = new EasyRefreshController();
 homeState.list = new List();
 homeState.page = 1;
 return homeState;
}

• Action
  action就是我们定义的意图,我们把事件或者某些操作定义成意图,通过发送dispatch特定的action,让effect或者reducer里对应的接收者进行处理!

//定义我们的意图,一般为枚举,命名最好是词达意
//Effect 接受处理的 Action，以 on{Verb} 命名
//Reducer 接受处理的 Action，以{verb} 命名
//playload用来约束参数类型
enum HomeAction { onLoad, onRefresh }

//effect的action
class HomeActionCreator {
 static Action onLoad(int page) {
   return  Action(HomeAction.onLoad,payload: page);
 }

 static Action onRefresh(){
   return  Action(HomeAction.onRefresh);
 }
}

enum HandOverAction { reloadData, loadMoreData }
// reducer的action
class HandOverActionCreator {
  static Action reloadData(List list) {
    return Action(HandOverAction.reloadData,payload: list);
  }

  static Action loadMoreData(List list) {
    return Action(HandOverAction.loadMoreData,payload: list);
  }

}

• Reducer
  reducer主要用来接收某个意图action,主要用来处理数据方面变化,修改等操作,即更新状态state。Reducer 是一个上下文无关的 pure function。
  它接收下面的参数

  • T state
  • Action action

  它主要包含三方面的信心

  • 接收一个意图action,做出数据修改。
  • 如果要修改数据,需要创建一份新的拷贝,修改在拷贝上。
  • 如果数据修改了,它会自动触发State的层层数据的拷贝,在以扁平化方式通知组件刷新。

Reducer buildReducer() {
  return asReducer(
    >{
      HandOverAction.reloadData: _reloadData,
      HandOverAction.loadMoreData:_loadMoreData,
    },
  );
}

HomeState _reloadData(HomeState state, Action action) {
  final HomeState newState = state.clone();
//  newState.list.clear();
  newState.list = action.payload;
  return newState;
}

HomeState _loadMoreData(HomeState state, Action action){
  final HomeState newState = state.clone();
  newState.list.addAll(action.payload);
  return newState;
}

• Effect
  effect的用法跟reducer类似,也是用来接收某个意图action,但是它主要用来处理所谓的函数副作用,简单理解为数据和状态state更新变化外为的其它操作和事务.默认情况下,effect会在reducer之前被执行。
  它接收下面的参数
  • Action action
  • Context context
    • BuildContext context
    • T state
    • dispatch
    • isDisposed

Effect会接收来自View的"意图",包括对应的生命周期的回调,然后做出具体的执行,例如页面跳转,dialog弹出等!它的处理可能是一个异步函数，数据可能在过程中被修改，所以我们应该通过 context.state 获取最新数据。 如果它要修改数据，应该发一个 Action 到 Reducer 里去处理。它对数据是只读的，不能直接去修改数据

Effect buildEffect() {
  return combineEffects(>{
    Lifecycle.initState:_init,
    HomeAction.onLoad: _onLoad,
    HomeAction.onRefresh: _onRefresh,
  });
}

void _init(Action action, Context ctx){
  ctx.dispatch(HomeActionCreator.onRefresh());
}

void _onLoad(Action action, Context ctx) {
  int page = action.payload;
  println("onload$page");
  NetUtlis.get("/utdcjjb/fdjiaojiebanlog/list.do?filter={'gangweiCode_\$equal':'5'}&page=$page&rows=10&sidx=lrtime&sord=desc",success: (value){
    ctx.state.page += 1;
    HandoverEntity entity = HandoverEntity.fromJson(value);
    ctx.state.refreshController.finishLoad(noMore: entity.data.xList.length <10);
    ctx.dispatch(HandOverActionCreator.onLoadMoreData(entity.data.xList));//转发到reducer去处理数据变化
  },failure: (error){
    print(error);
  });
}

void _onRefresh(Action action,Context ctx){
  int page = 1;
  ctx.state.page = 1;
  NetUtlis.get("/utdcjjb/fdjiaojiebanlog/list.do?filter={'gangweiCode_\$equal':'5'}&page=$page&rows=10&sidx=lrtime&sord=desc",success: (value){
    ctx.state.page += 1;
    HandoverEntity entity = HandoverEntity.fromJson(value);
    ctx.state.refreshController.resetLoadState();
    ctx.state.refreshController.finishRefresh();
    ctx.dispatch(HandOverActionCreator.onReloadData(entity.data.xList));//转发到reducer去处理数据变化
  },failure: (error){
    print(error);
  });
}

• View
  是一个输出Widget的上下文无关的函数。它接收下面的参数

  • T state
  • Dispatch
  • ViewService

  它主要包含三方面的信息

  • 视图完全由数据驱动
  • 视图产生的事件/回调,通过Dispatch发出"意图"(action),但绝不做出具体实现。
  • 使用依赖的组件/适配器,通过在组件上显示配置(component),再通过ViewService标准化调用。其中ViewService提供了三个能力
    • BuildContext context,获取flutter Build-Context的能力
    • Widget buildView(String name),直接创建子组件的能力
      • 这里传入的name即在Dependencies上配置的名称。
      • 创建的子组件不需要传入任何其他的参数,因为子组件需要的参数,已经通过Dependencies配置中将它们的数据关系,通过connector确立。
    • ListAdapter buildAdapter(),直接创建适配器的能力

Widget buildView(HomeState state, Dispatch dispatch, ViewService viewService) {
  final ListAdapter adapter = viewService.buildAdapter();//适配器
  return Scaffold(
    appBar: PreferredSize(
      preferredSize: Size.fromHeight(50.0),
      child: AppBar(
        automaticallyImplyLeading: false,
        centerTitle: true,
        elevation: 0,
        title: Text('值长日志'),
      ),
    ),
    body: SafeArea(
      child: EasyRefresh(
//        bottomBouncing: false,
//        topBouncing: false,
        header: ClassicalHeader(),
        footer: ClassicalFooter(
          enableInfiniteLoad: false,
          enableHapticFeedback: false,
        ),
        controller: state.refreshController,
        onRefresh: () async{
          dispatch(HomeActionCreator.onRefresh());//意图回调
        },
        onLoad: () async{
          dispatch(HomeActionCreator.onLoad(state.page));
        },
        child: ListView.builder(
          itemBuilder: adapter.itemBuilder,
          itemCount: adapter.itemCount,
        ),
      ),
    ),
  );

}

• Connector
  • 它表达了如何从一个大数据中读取小数据,同时对小数据的修改如何同步给大数据,这样的数据连接关系
  • 它是将一个集中式的Reducer,可以由多层次多模块的小Reducer自动拼接的关键。
    • 它大大的降低了我们使用的Redux的复杂度。我们不再关心组装过程,我们关心的核心是什么动做促使数据怎么变化。
  • 它使用在配置Dependencies中,在配置中我们就固化了大组件和小组件之间的连接关系(数据管道),所以在我们使用小组件的时候是不需要传入任何动态参数的。

class _HomeConnector extends ConnOp> {
//HomeState是大page的数据,handover是列表item的数据,通过大数据给小数据赋值
  @override 
  List get(HomeState state) {
    if(state.list?.isNotEmpty == true){
      return state.list.map((m){
        HandOverState handOverState = new HandOverState();
        handOverState.handoverDataModel = m;
            return ItemBean("handover", handOverState);
      }).toList();
    }else{
      return[];
    }
  }
//小数据发生改变,回传给大数据
  @override
  void set(HomeState state, List items) {
    if(items.isNotEmpty == true){
      state.list = List.from(items.map((m){
        return m;
    }).toList());
  }else{
      state.list = new List();
    }
  }

  @override
  subReducer(reducer) {
    // TODO: implement subReducer
    return super.subReducer(reducer);
  }
}

• Dependencies
  是一个表达组件之间依赖关系的结构。它接收两个字段

  • slots
    • {}
  • adapter

  它主要包含三方面的信息

  • slots, 组件依赖的插槽
  • adapter, 组件依赖的具体适配器(用来构建高性能的ListView)。
  • Dependent 是subComponent|subAdapter + connector的组合。
  • 一个组件的Reducer由Component自身配置的Reducer和它的Dependencies下的所有子Reducers自动复合而成。

///register in component,真实数据没接入component,所以拷贝的官方数据
class ItemComponent extends ItemComponent {
  ItemComponent()
      : super(
          view: buildItemView,
          reducer: buildItemReducer(),
          dependencies: Dependencies(
            slots: >{
              'appBar': AppBarComponent().asDependent(AppBarConnector()),
              'body': ItemBodyComponent().asDependent(ItemBodyConnector()),
              'ad_ball': ADBallComponent().asDependent(ADBallConnector()),
              'bottomBar': BottomBarComponent().asDependent(BottomBarConnector()),
            },
          ),
        );
}

///call in view
Widget buildItemView(ItemState state, Dispatch dispatch, ViewService service) {
  return Scaffold(
      body: Stack(
        children: [
          service.buildComponent('body'),
          service.buildComponent('ad_ball'),
          Positioned(
            child: service.buildComponent('bottomBar'),
            left: 0.0,
            bottom: 0.0,
            right: 0.0,
            height: 100.0,
          ),
        ],
      ),
      appBar: AppbarPreferSize(child: service.buildComponent('appBar')));
}

• Adapter
  首先要明白Adapter是一种组件化的抽象,主要是运用在ListView的场景,提高性能和流畅度。一个Adapter和Component几乎是一致的,除了以下几点

  • Component生成一个Widget,Adapter生成一个ListAdapter,ListAdapter有能力生成一组Widget。

    • 不具体生成Widget,而是一个ListAdapter,能非常大的提升页面帧率和流畅度。

  • Effect-Lifecycle-Promote

    • Component 的 Effect 是跟着 Widget 的生命周期走的，Adapter 的 Effect 是跟着上一级的 Widget 的生命周期走。
    • Effect 提升，极大的解除了业务逻辑和视图生命的耦合，即使它的展示还未出现，的其他模块依然能通过 dispatch-api，调用它的能力。

• appear|disappear 的通知
  • 由于 Effect 生命周期的提升，我们就能更加精细的区分 init|dispose 和 appear|disappear。而这在 Component 的模型中是无法区分的
• Reducer is long-lived, Effect is medium-lived, View is short-lived.

其中Adapter有三种实现,我们需要继承其中一种

• DynamicFlowAdapter(模版是一个 Map，接受一个数组类型的数据驱动)
• StaticFlowAdapter(模版是一个 Array，接受 Object|Map 的数据驱动,模版接收一个 Dependent 的数组，每一个 Dependent 可以是 Component 或者 Adapter + Connector 的组合)
• CustomAdapter(对大 Cell 的自定义实现
  要素和 Component 类似，不一样的地方是 Adapter 的视图部分返回的是一个 ListAdapter)

• Lifecycle
  默认的所有生命周期，本质上都来自于 flutter State 中的生命周期
  • initState
  • didChangeDependencies
  • build
  • didUpdateWidget
  • deactivate
  • dispose

• 在组件内，Reducer 的生命周期是和页面一致的，Effect 和 View 的生命周期是和组件的 Widget 一致的。
• 在适配器中，Reducer 的生命周期是和页面一致的，Effect 的生命周期是和 ListView 的生命周期一致，View 的生命周期是短暂的(划入不可见区域即销毁)。同时增加了 appear 和 disappear 的生命周期， 代表这个 adapter 管理的视图数组，刚进入显示区和完全离开显示区的回调。

我们了解完基础的fish_redux库的一些基本组成了,在这个基础上,我们来看一下用fish_redux编写flutter的目录结构,主要借助于闲鱼团队提供的插件FishReduxTemplate我们省了很多功夫(剩下的就是命名和自己组合的能力了)

lib//主要编写代码目录
├── app.dart//主入口
├── entity_factory.dart//模型工厂辅助类
├── home//主页面
│   ├── action.dart
│   ├── effect.dart
│   ├── home_adapter//适配器
│   │   ├── action.dart
│   │   ├── adapter.dart
│   │   └── reducer.dart
│   ├── home_component//组件
│   │   ├── action.dart
│   │   ├── component.dart
│   │   ├── effect.dart
│   │   ├── reducer.dart
│   │   ├── state.dart
│   │   └── view.dart
│   ├── page.dart
│   ├── state.dart
│   └── view.dart
├── login//login页面
│   ├── action.dart
│   ├── effect.dart
│   ├── page.dart
│   ├── state.dart
│   └── view.dart
├── main.dart
└── network//网络请求和模型实体类
    ├── handover_entity.dart
    ├── netuntil.dart
    └── user_info_entity.dart

看完以上我们再来了解一下fish_redux的的工作流程:

flutter流程.png--网上来源

整体流程如下:
用户进行某个操作----->然后调用context.dispatch方法发送一个由ActionCreator创建的Action----->effect接收并处理，然后dispatch给reducer----->reducer接收并产生新的state----->state更新导致界面显示的刷新

2.fish_redux实战,接入网络,刷新等等实际应用场景

2.1 创建应用的根Widget

新建一个app.dart用来创建应用的根Widget,app.dart如下:

import 'package:fish_redux/fish_redux.dart';
import 'package:flutter_redux_demo/home/page.dart';
import 'package:flutter_redux_demo/login/page.dart';

Widget createApp() {
  final AbstractRoutes routes = PageRoutes(
    pages: >{
      /// 注册登陆主页面
      "login": LoginPage(),
      "home": HomePage(),
    },
    visitor: (String path, Page page) {
      /// AOP
      /// 页面可以有一些私有的 AOP 的增强， 但往往会有一些 AOP 是整个应用下，所有页面都会有的。
      /// 这些公共的通用 AOP ，通过遍历路由页面的形式统一加入。
      page.enhancer.append(
        /// View AOP
        viewMiddleware: >[
          safetyView(),
        ],

        /// Adapter AOP
        adapterMiddleware: >[safetyAdapter()],

        /// Effect AOP
        effectMiddleware: [
         // _pageAnalyticsMiddleware(),
        ],

        /// Store AOP
        middleware: >[
          //这块主要用到middleware的打印功能，监听Action在页面间的调整过程
          //logMiddleware(tag: page.runtimeType.toString()), //这块主要用到middleware的打印功能，监听Action在页面间的调整过程
        ],
      );
    },
  );

  return MaterialApp(
    title: 'fish_redux_demo',
    debugShowCheckedModeBanner: false,
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: routes.buildPage('login',null),
    onGenerateRoute: (RouteSettings settings) {
      return MaterialPageRoute