Flutter in action 闲鱼最佳实践

闲鱼 Flutter 应用框架：Fish Redux

作者：闲鱼技术 - 吉丰

开源地址：https://github.com/alibaba/fish-redux

3 月 5 日，闲鱼宣布在 GitHub 上开源 Fish Redux，Fish Redux 是一个基于Redux 数据管理的组装式 flutter 应用框架， 特别适用于构建中大型的复杂应用，它最显著的特征是 函数式的编程模型、可预测的状态管理、可插拔的组件体系、最佳的性能表现。下文中，我们将详细介绍 Fish Redux 的特点和使用过程，以下内容来自InfoQ 独家对闲鱼 Flutter 团队的采访和 Fish Redux 的开源文档。

开源背景

在闲鱼接入 Flutter 之初，由于我们的落地的方案希望是从最复杂的几个主链路进行尝试来验证 flutter 完备性的，而我们的详情整体来讲业务比较复杂，主要体现在两个方面：

● 页面需要集中状态管理，也就是说页面的不同组件共享一个数据来源，数据来源变化需要通知页面所有组件。

● 页面的UI展现形式比较多（如普通详情、闲鱼币详情、社区详情、拍卖详情等），工作量大，所以 UI 组件需要尽可能复用，也就是说需要比较好的进行组件化切分。在我们尝试使用市面上已有的框架（google提供的redux以及bloc）的时候发现，没有任何一个框架可以既解决集中状态管理，又能解决 UI 的组件化的，因为本

第一章　Flutter开源工具

2　>　Flutter in Action——闲鱼最佳实践

身这两个问题有一定的矛盾性（集中 vs 分治）。因此我们希望有一套框架能解决我们的问题，fish redux 应运而生。fish redux 本身是经过比较多次的迭代的，目前大家看到的版本经过了 3 次比较大的迭代，实际上也是经过了团队比较多的讨论和思考。

第一个版本是基于社区内的 flutter_redux 进行的改造，核心是提供了 UI 代码的组件化，当然问题也非常明显，针对复杂的详情和发布业务，往往业务逻辑很多，无法做到逻辑代码的组件化。

第二个版本针对第一个版本的问题，做出了比较重大的修改，解决了 UI 代码和逻辑代码的分治问题，但同时，按照redux的标准，打破了redux的原则，对于精益求精的闲鱼团队来讲，不能接受；因此，在第三个版本进行重构时，我们确立了整体的架构原则与分层要求，一方面按照 reduxjs 的代码进行了 flutter 侧的 redux 实现，将 redux 的原则完整保留下来。另一方面针对组件化的问题，提供了 redux 之上的 component 的封装，并创新的通过这一层的架构设计提供了业务代码分治的能力。

至此，我们完成了 fish redux 的基本设计，但在后续的应用中，发现了业务组装以后的代码性能问题，针对该问题，我们再次提供了对应的 adapter 能力，保障了在长列表场景下的 big cell 问题。目前，fish redux 已经在线上稳定运行超过 3 个月以

上，未来，期待 fish redux 给社区带来更多的输入。

......更多章节请下载PDF文档：文档来自阿里云客户端下载，现在分享给大家!......

本文链接：https://www.sxlog.com/post/999.html

广告