Flutter与Fish Redux结合：闲鱼技术团队的实战经验分享
项目地址: https://gitcode.com/gh_mirrors/fi/fish-redux 你是否在使用Flutter开发中大型应用时遇到数据流混乱、组件通信复杂、性能优化困难等问题？本文将分享闲鱼技术团队基于Fish Redux框架的实战经验，带你了解如何用这套组合方案构建高性能、易维护的Flutter应用。读完本文你将掌握Fish Redux的核心架构思想、组件化开发流程以及性能优化技巧。
Fish Redux简介
Fish Redux是闲鱼技术团队开发的一套基于Redux状态管理的Flutter应用框架，专为中大型应用设计。它继承了Redux的可预测性、集中式、可调试性和灵活性，同时解决了Flutter在构建复杂应用时面临的数据流、通信、组件化和逻辑解耦等关键问题。
核心特性
Fish Redux具有四大核心特性：
- 函数式编程：采用纯函数思想处理状态变更和副作用
- 可预测的状态容器：统一的状态管理，使应用行为可预测
- 可插拔的组件化：灵活的组件系统，支持组件的即插即用
- 无损性能：针对Flutter渲染特性优化，确保高性能运行
官方文档：doc/README.md | 中文文档
与传统Redux的区别
Fish Redux并非简单的Redux移植，而是针对Flutter应用开发的全面解决方案。它与传统Redux相比有以下关键差异：
1. 解决集中与分治的矛盾
传统Redux需要手动组织代码将小的Reducer合并到主Reducer，而Fish Redux通过显式表达组件间依赖关系，自动完成这一合并过程。
2. 提供简洁的组件抽象模型
Fish Redux将组件抽象为三个核心函数的组合：View（视图）、Effect（副作用）和Reducer（状态变更），使组件结构清晰且易于理解。
3. 专为列表优化的Adapter抽象
针对Flutter中ListView场景，Fish Redux提供了Adapter抽象模型，解决了大型列表的性能问题，同时提供了更精细的生命周期管理。
详细差异对比：Fish Redux与Redux的区别
核心架构与通信机制
内部通信机制
Fish Redux采用"Self-First-Broadcast"（自身优先广播）的通信机制。当Action发出时，首先由组件自身的Effect处理，未处理的Action会广播到其他组件和Redux系统，实现了组件间的灵活通信。
跨页面通信
通过Context.appBroadcast实现跨页面通信，每个页面的PageStore独立接收并处理Action，确保应用状态的一致性。
刷新机制
Fish Redux的刷新机制分为数据刷新和视图刷新两个阶段：
- 数据刷新：局部数据修改自动触发上层数据的浅拷贝，对业务代码透明
- 视图刷新：状态变化时，Store通知所有组件，由ShouldUpdate决定是否刷新视图
组件化开发实践
组件模型
Fish Redux的组件模型由四个部分组成：
- View：负责UI渲染
- Effect：处理副作用（如网络请求、定时器等）
- Reducer：处理状态变更
- Dependencies：声明依赖的子组件和适配器
组件公式：Component = View + Effect(可选) + Reducer(可选) + Dependencies(可选)
目录结构规范
Fish Redux推荐的目录结构如下，遵循"上层负责组装，下层负责实现"的原则：
sample_page
-- action.dart /// 定义action类型和创建器
-- page.dart /// 配置页面或组件
-- view.dart /// 定义UI展示函数
-- effect.dart /// 处理副作用
-- reducer.dart /// 处理状态变更
-- state.dart /// 定义状态和子状态连接器
components
sample_component
-- action.dart
-- component.dart
-- view.dart
-- effect.dart
-- reducer.dart
-- state.dart
详细规范：directory.md
组件实现示例
以下是一个简单的待办事项组件实现：
// todo_component/component.dart
import 'package:fish_redux/fish_redux.dart';
import 'effect.dart';
import 'reducer.dart';
import 'state.dart';
import 'view.dart';
export 'state.dart';
class ToDoComponent extends Component<ToDoState> {
ToDoComponent()
: super(
view: buildView,
effect: buildEffect(),
reducer: buildReducer(),
);
}
完整示例：todo_component
页面组装示例
页面是特殊的组件，负责组装整个页面的组件树：
// todo_list_page/page.dart
import 'package:fish_redux/fish_redux.dart';
import 'effect.dart';
import 'list_adapter/adapter.dart';
import 'flow_adapter/adapter.dart';
import 'reducer.dart';
import 'report_component/component.dart';
import 'state.dart';
import 'view.dart';
class ToDoListPage extends Page<PageState, Map<String, dynamic>> {
ToDoListPage()
: super(
initState: initState,
effect: buildEffect(),
reducer: buildReducer(),
view: buildView,
dependencies: Dependencies<PageState>(
adapter: const NoneConn<PageState>() + adapter,
slots: <String, Dependent<PageState>>{
'report': ReportConnector() + ReportComponent()
}),
);
}
列表性能优化：Adapter
除了基础组件模型，Fish Redux还提供了Adapter抽象模型，专门解决ListView场景下的性能问题：
- 将"大单元格"放入ListView时仍能享受性能优化
- 区分appear|disappear和init|dispose事件
- 优化Effect生命周期，减少与View的耦合
Adapter有三种实现方式：
实战案例：待办事项应用
Fish Redux提供了一个完整的待办事项应用示例，展示了框架的核心用法：
运行示例
cd ./example
flutter create .
flutter run
示例代码：example
该示例包含以下功能：
- 添加新待办事项
- 标记待办事项为已完成/未完成
- 删除待办事项
- 统计待办事项数量
通过这个示例，你可以了解Fish Redux在实际应用中的使用方式，包括组件通信、状态管理和路由跳转等核心功能。
总结与展望
Fish Redux作为闲鱼技术团队的实战经验结晶，为Flutter中大型应用开发提供了一套完整的解决方案。它通过函数式编程思想和组件化架构，解决了数据流管理、组件通信和性能优化等关键问题，使开发复杂Flutter应用变得更加高效和可维护。
随着Flutter生态的不断发展，Fish Redux也在持续进化。未来，它将进一步优化开发体验，提供更多开箱即用的功能，帮助开发者构建更高质量的Flutter应用。
如果你对Fish Redux感兴趣，欢迎通过以下方式深入学习：
关注我们，获取更多Flutter和Fish Redux的实战经验分享！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
