类似闲鱼源码_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>>