作者&＃xff1a;闲鱼技术-海潴
fish_redux是闲鱼技术团队打造的flutter应用开发框架&＃xff0c;旨在解决页面内组件间的高内聚、低耦合问题。
从react_redux说起
redux对于前端的同学来说是一个比较熟悉的框架了&＃xff0c;fish_redux借鉴了redux单项数据流思 想。在flutter上说到redux&＃xff0c;大家可能第一反应会类比到react上的react_redux。在react_redux中有个重要的概念——connect&＃xff0c;
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
简单得说&＃xff0c;connect允许使用者从Redux store中获取数据并绑定到组件的props上&＃xff0c;可以dispatch一个action去修改数据。
那么fish_redux中的connector是做什么的呢&＃xff1f;为什么说connector解决了组件内聚的问题&＃xff1f;我们应该如何理解它的设计呢&＃xff1f;
connector in fish_redux
尽管都起到了连接的作用&＃xff0c;但fish_redux与react_redux在抽象层面有很大的不同。
fish_redux本身是一个flutter上的应用框架&＃xff0c;建立了自己的component体系&＃xff0c;用来解决组件内的高内聚和组件间的低耦合。从connector角度来说&＃xff0c;如何解决内聚问题&＃xff0c;是设计中的重要考量。
fish_redux自己制造了Component树&＃xff0c;Component聚合了state和dispatch&＃xff0c;每一个子Component的state通过connector从父Component的state中筛选。如图所示:
可以看到&＃xff0c;fish_redux的connector的主要作用把父子Component关联起来&＃xff0c;最重要的操作是filter。state从上之下是一个严谨的树形结构&＃xff0c;它的结构复用了Component的树形结构。类似一个漏斗形的数据管道&＃xff0c;管理数据的分拆与组装。它表达了如何组装一个Component。
而对于react_redux来说&＃xff0c;它主要的作用在于把react框架和redux绑定起来&＃xff0c;重点在于如何让React component具有Redux的功能。
从图中可以看到&＃xff0c;react_redux和React是平行的结构&＃xff0c;经过mapStateToProps后的state也不存在严谨的树形结构&＃xff0c;即对于一个React component来说&＃xff0c;它的state来自于Redux store而不是父component的state。从框架设计的角度来说&＃xff0c;react_redux最重要的一个操作就是attach。
源码分析
说完概念&＃xff0c;我们从源码的角度来看看fish_redux中的connector是如何运作的&＃xff0c;以fish_redux提供的example为例。
class ToDoListPage extends Page> { ToDoListPage() : super( ... dependencies: Dependencies( adapter: ToDoListAdapter(), slots: >{ &＃39;report&＃39;: ReportConnector() &＃43; ReportComponent() }), ... ); }
在ToDoListPage 的构造函数中&＃xff0c;向父类构造传递了一个Dependencies对象&＃xff0c;在构造Dependencies时&＃xff0c;参数slots中包含了名叫"report"的item&＃xff0c;注意这个item的生成&＃xff0c;是由一个 ReportConnector&＃43;ReportComponent产生的。
从这里我们得出一个简单却非常重要的结论:
在fish_redux中&＃xff0c;一个Dependent &＃61; connector &＃43; Component 。
Dependent代表页面拼装中的一个单元&＃xff0c;它可以是一个Component(通过buildComponent函数产 生)&＃xff0c;也可以是一个Adapter(由buildAdapter函数产生)。这样设计的好处是&＃xff0c;对于View拼装操作 来说&＃xff0c;Dependent对外统一了API而不需要透出更多的细节。
根据上面我们得出的结论&＃xff0c;connector用来把一个更小的Component单元链接到一个更大的 Component或Adapter上。这与我们之前的描述相符合。
connector到底是什么
知道了connector的基本作用&＃xff0c;我们来看一下它到底链接了哪些东西以及如何链接。
先来看一下ReportConnector 类的定义:
class ReportConnector extends ConnOp
ReportConnector继承了ConnOp类&＃xff0c;所有connector的操作包括&＃43;操作&＃xff0c;都来自于ConnOp类。
set/get
既然是数据管道&＃xff0c;就会有获取和放置
set函数的入参很好得表达了T和P的意思&＃xff0c;即把一个P类型的subState合并到T类型的 state中。
再回头看get函数&＃xff0c;就很好理解了&＃xff0c;get函数表达的就是如何从T类型的state中获取P类型 的subState供Dependent使用。
operator &＃43;
&＃43;操作符的重载是我们最初看到connector作用的地方&＃xff0c;也是connector发挥作用的入口。
Logic是Component和Adapter的父类&＃xff0c;它表示页面组装元素的逻辑层&＃xff0c;里面包含了reducer/effect/higherEffect等与逻辑相关的元素以及它的组装过程。
operator&＃43;调用了createDependent函数&＃xff0c;接着会调用到_Dependent类的构造函数&＃xff0c;这里将 logic和connector放入_Dependent内部&＃xff0c;在后面fish_redux对Component组装的过程中&＃xff0c;connector会随着外部对_Dependent中函数的调用发挥作用。
connector正式登场
铺垫了这么多&＃xff0c;是该connector正式发挥作用的时候了。
get
我们以Component为例&＃xff0c;会调用到_Dependent的buildComponent函数&＃xff1a;
Widget buildComponent(MixedStore store, Get getter) { final AbstractComponent component &＃61; logic; return component.buildComponent(store, () &＃61;> connector.get(getter())); }
这里的logic实际就是一个Component对象&＃xff0c;在调用Component的buildComponent函数的 时候&＃xff0c;使用get函数从一个大的父state中获取到当前Component需要的数据集。接下去&＃xff0c;这个变换后的子state将被用在例如ViewBuilder或Redcuer函数中。
这是connector在数据获取上的作用。
set
还是在_Dependent类里面&＃xff0c;看createSubReducer函数:
SubReducer createSubReducer() { final Reducer reducer &＃61; logic.reducer; return reducer !&＃61; null ? connector.subReducer(reducer) : null; }
首现从一个Logic(这里实际上是一个Component)对象中获取到外部设置进来的reducer&＃xff0c;接着 调用subReducer返回一个SubReducer对象。SubReducer是一个被wrap后的Reducer
subReducer的实现在MutableConn中&＃xff0c;ConnOp继承了MutableConn类&＃xff0c;也获得了这个能 力。
SubReducer subReducer(Reducer reducer) { return (T state, Action action, bool isStateCopied) { final P props &＃61; get(state); if (props &＃61;&＃61; null) { return state; } final P newProps &＃61; reducer(props, action); final bool hasChanged &＃61; newProps !&＃61; props; final T copy &＃61; (hasChanged && !isStateCopied) ? _clone(state) : state; if (hasChanged) { set(copy, newProps); } return copy; }; }
它首现通过get函数得到一个变换后的数据集props&＃xff0c;接着调用原始的reducer函数进行逻辑处 理&＃xff0c;这里有一个优化也是SubReducer的作用&＃xff0c;如果数据集在经过reducer处理之后发生了变化&＃xff0c; 并且state已经被copy过一次了(isStateCopied&＃61;&＃61;true)&＃xff0c;就直接把newProps通过set函数 更新到state中去。(这个优化可以防止多个子state发生变化的时候父state被拷贝多次)
至此&＃xff0c;connector在数据更新上的作用也体现出来了。
ReportConnector
最后&＃xff0c;就好理解ReportConnector的实现了:
class ReportConnector extends ConnOp { &＃64;override ReportState get(PageState state) { final ReportState reportState &＃61; ReportState(); reportState.total &＃61; state.toDos.length; reportState.done &＃61; state.toDos.where((ToDoState tds) &＃61;> tds.isDone).toList().length; return reportState; } &＃64;override void set(PageState state, ReportState subState) {} }
很明显的&＃xff0c;在get函数中&＃xff0c;ReportState从PageState中获得了total/done字段。
总结
闲鱼客户端的详情页完全使用了fish_redux进行了重构&＃xff0c;通过高内聚的Component&＃43;connector形式&＃xff0c;使得Component可以被大量复用&＃xff0c;很好得支持了5中类型的详情页。未来我们会基于*fish_redux*强大的扩展能力制作更多组件来满足不同业务对于框架的需求。
京公网安备 11010802041100号