Flutter高内聚组件怎么作？阿里闲鱼打造开源高效方案！

fish_redux是闲鱼技术团队打造的flutter应用开发框架，旨在解决页面内组件间的高内聚、低耦合问题。开源地址：https://github.com/alibaba/fish-redux

从react_redux提及

redux对于前端的同窗来讲是一个比较熟悉的框架了，fish_redux借鉴了redux单项数据流思
想。在flutter上说到redux，你们可能第一反应会类比到react上的react_redux。在react_redux中有个重要的概念——connect，

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

简单得说，connect容许使用者从Redux store中获取数据并绑定到组件的props上，能够dispatch一个action去修改数据。

那么fish_redux中的connector是作什么的呢？为何说connector解决了组件内聚的问题？咱们应该如何理解它的设计呢？

connector in fish_redux

尽管都起到了链接的做用，但fish_redux与react_redux在抽象层面有很大的不一样。

fish_redux自己是一个flutter上的应用框架，创建了本身的component体系，用来解决组件内的高内聚和组件间的低耦合。从connector角度来讲，如何解决内聚问题，是设计中的重要考量。

fish_redux本身制造了Component树，Component聚合了state和dispatch，每个子Component的state经过connector从父Component的state中筛选。如图所示:

能够看到，fish_redux的connector的主要做用把父子Component关联起来，最重要的操做是filter。state从上之下是一个严谨的树形结构，它的结构复用了Component的树形结构。相似一个漏斗形的数据管道，管理数据的分拆与组装。它表达了如何组装一个Component。

而对于react_redux来讲，它主要的做用在于把react框架和redux绑定起来，重点在于如何让React component具备Redux的功能。

从图中能够看到，react_redux和React是平行的结构，通过mapStateToProps后的state也不存在严谨的树形结构，即对于一个React component来讲，它的state来自于Redux store而不是父component的state。从框架设计的角度来讲，react_redux最重要的一个操做就是attach。

源码分析

说完概念，咱们从源码的角度来看看fish_redux中的connector是如何运做的，以fish_redux提供的example为例。

class ToDoListPage extends Page<PageState, Map<String, dynamic>> {
  ToDoListPage()
      : super(
          ...
          dependencies: Dependencies<PageState>(
              adapter: ToDoListAdapter(),
              slots: <String, Dependent<PageState>>{
                'report': ReportConnector() + ReportComponent()
              }),
        ...
        );
}

在ToDoListPage
的构造函数中，向父类构造传递了一个Dependencies对象，在构造Dependencies时，参数
slots中包含了名叫"report"的item，注意这个item的生成，是由一个
ReportConnector+ReportComponent产生的。

从这里咱们得出一个简单却很是重要的结论:

在fish_redux中，一个Dependent = connector + Component 。

Dependent表明页面拼装中的一个单元，它能够是一个Component(经过buildComponent函数产
生)，也能够是一个Adapter(由buildAdapter函数产生)。这样设计的好处是，对于View拼装操做
来讲，Dependent对外统一了API而不须要透出更多的细节。

根据上面咱们得出的结论，connector用来把一个更小的Component单元连接到一个更大的
Component或Adapter上。这与咱们以前的描述相符合。

connector究竟是什么

知道了connector的基本做用，咱们来看一下它到底连接了哪些东西以及如何连接。

先来看一下ReportConnector
类的定义:

class ReportConnector extends ConnOp<PageState, ReportState>

ReportConnector继承了ConnOp类，全部connector的操做包括+操做，都来自于ConnOp类。

set/get

既然是数据管道，就会有获取和放置

set函数的入参很好得表达了T和P的意思，即把一个P类型的subState合并到T类型的
state中。

再回头看get函数，就很好理解了，get函数表达的就是如何从T类型的state中获取P类型
的subState供Dependent使用。

operator +

+操做符的重载是咱们最初看到connector做用的地方，也是connector发挥做用的入口。

Logic是Component和Adapter的父类，它表示页面组装元素的逻辑层，里面包含了
reducer/effect/higherEffect等与逻辑相关的元素以及它的组装过程。

operator+调用了createDependent函数，接着会调用到_Dependent类的构造函数，这里将
logic和connector放入_Dependent内部，在后面fish_redux对Component组装的过程当中，connector会随着外部对_Dependent中函数的调用发挥做用。

connector正式登场

铺垫了这么多，是该connector正式发挥做用的时候了。

get

咱们以Component为例，会调用到_Dependent的buildComponent函数：

Widget buildComponent(MixedStore<Object> store, Get<T> getter) {
    final AbstractComponent<P> component = logic;
    return component.buildComponent(store, () => connector.get(getter()));
}

这里的logic实际就是一个Component对象，在调用Component的buildComponent函数的
时候，使用get函数从一个大的父state中获取到当前Component须要的数据集。接下去，这个变换后的子state将被用在例如ViewBuilder或Redcuer函数中。

这是connector在数据获取上的做用。

set

仍是在_Dependent类里面，看createSubReducer函数:

SubReducer<T> createSubReducer() {
    final Reducer<P> reducer = logic.reducer;
    return reducer != null ? connector.subReducer(reducer) : null;
}

首现从一个Logic(这里其实是一个Component)对象中获取到外部设置进来的reducer，接着
调用subReducer返回一个SubReducer对象。SubReducer是一个被wrap后的Reducer

subReducer的实如今MutableConn中，ConnOp继承了MutableConn类，也得到了这个能
力。

SubReducer<T> subReducer(Reducer<P> reducer) {
    return (T state, Action action, bool isStateCopied) {
      final P props = get(state);
      if (props == null) {
        return state;
      }
      final P newProps = reducer(props, action);
      final bool hasChanged = newProps != props;
      final T copy = (hasChanged && !isStateCopied) 
                  ? _clone<T>(state) : state;
      if (hasChanged) {
        set(copy, newProps);
      }
      return copy;
    };
}

它首现经过get函数获得一个变换后的数据集props，接着调用原始的reducer函数进行逻辑处
理，这里有一个优化也是SubReducer的做用，若是数据集在通过reducer处理以后发生了变化，
而且state已经被copy过一次了(isStateCopied==true)，就直接把newProps经过set函数
更新到state中去。(这个优化能够防止多个子state发生变化的时候父state被拷贝屡次)

至此，connector在数据更新上的做用也体现出来了。

ReportConnector

最后，就好理解ReportConnector的实现了:

class ReportConnector extends ConnOp<PageState, ReportState> {
  @override
  ReportState get(PageState state) {
    final ReportState reportState = ReportState();
    reportState.total = state.toDos.length;
    reportState.done =
        state.toDos.where((ToDoState tds) => tds.isDone).toList().length;
    return reportState;
  }

  @override
  void set(PageState state, ReportState subState) {}
}

很明显的，在get函数中，ReportState从PageState中得到了total/done字段。

总结

闲鱼客户端的详情页彻底使用了fish_redux进行了重构，经过高内聚的Component+connector形式，使得Component能够被大量复用，很好得支持了5中类型的详情页。将来咱们会基于fish_redux强大的扩展能力制做更多组件来知足不一样业务对于框架的需求。

原文连接 本文为云栖社区原创内容，未经容许不得转载。