为啥要使用 Fish redux
1, 年前就被闲鱼大佬安利, 种草已久
2, 想要对比 Flutter Redux, 学习体会它带来的优越性
3, 参与并支持一下国产, 现在 Flutter 生态还在早期
准备工作
1,Redux.JS 文档
2,Fish Redux 文档
3,Pub 使用文档
萌新(没接触过 Redux): 建议按顺序看一遍, 磨刀不费砍柴功, 扎实的理论基础是很有用处的
熟练玩家(Demo 用过 Redux): 建议把 Fish Redux 文档的简介和 Component 看下, 尤其是 Component, 这是它独特的地方
老司机(项目中用过 Redux.JS 或 Flutter Redux): 可以重点看下 Component 中的 Effect,Dependencies,Page, 还有 Adapter
在看文档时, 可以把 Fish Redux 项目 Clone 下来, 先把 Example 改下跑跑看, 再对着源码理解下文档中的概念.
重要概念
当然以下概念还是需要理解的:
Action
Action 定义一种行为, 可以携带信息, 发往 Store. 换言之 Store 发生改变须由 Action 触发, Fish redux 有以下约定: Action 包含两个字段 type 和 payload; 推荐写法是在 action.dart 里定义一个 type 枚举类和一个 ActionCreator 类, 这样有利于约束 payload 的类型.
Reducer/Effect
这两个函数都是用来处理数据的函数, Reducer 是纯函数响应 Action 对 Store 数据进行改变. Effect 用来处理来自视图的意图, 如点击事件, 发起异步请求, 这些有副作用的操作.
Page
可以看成是一个容器, 它用来配置聚合 State,Effect,Reduce,View,Dependencies 等
一个页面内都有且仅有一个 Store(意思是会有好多个 Store, 这是区别于 Flutter Redux 的)
Page 继承于 Component, 所以它能配置所有 Component 的要素(意思是比 Component 多了 Middleware 和 initState)
Page 能配置 Middleware, 用于对 Redux 做 AOP 管理(意思是可以无侵入的实现一些如 log 打印, 性能分析这样的通用功能. 中间件定义是可插拔, 可叠加, 但不会改变事件流程)
Page 必须配置一个初始化页面数据的初始化函数 initState(页面有初始数据是必须的吧)
Adapter(可选)
这个不是必须, 但确实很屌, 很好用, 使用和 Android 的老配方差不多, 妙在效果拔群. 有追求的可以看下历史和原理, 当然还有源码.
有这些储备, 那么可以开始写代码了
接入
1, 创建一个 flutter project, 按照文档加入依赖
2, 按照定义 (当然也可以对着 Example) 分别创建 Action,State,Effect,Reducer,View,Page 这几个文件, 并写套路代码.
3, 运行代码观察效果
个人体验
1, 集中, 分治
Fish Redux 完整复刻了 Redux.JS 的核心概念, 状态是一颗 State 树, 完整体现[Predictable],[Centralized],[Debuggable],[Flexible], 数据状态是由 Redux 集中管理的. 分治是分而治之, 把一个大的问题拆解成若干独立的小问题去解决, 比如 Effect 的实现和 Component 的封装, 一个页面可以由多个 Component 和 Effect 共同组成, 分治带来的一个额外好处是提高了内聚性和可复用性.
2,Adapter
个人认为这是闲鱼团队基于现实业务的一个很重要创造, Listview 可以占到一个应用的 50% 以上界面, 它的体验至关重要. 事实证明 Adapter 封装的很友好, 性能也很突出, 在 Demo 上就可以明显对比出来, 很妙.
3, 文档
这点是可以理解一下的, 毕竟刚开源. 现状是注释少, 好多模块还没有. 文档有, 但不太具体生动, 友好, 读者没带入容易字都认识, 但看几遍还不解其意.
问题
1,Fish Redux 一个页面一个 Store 的资源开销?
用 Observatory 查看, 单个实例引用并不大, 而且退出页面 store 实例被回收, 理论上资源比 flutter redux 还少一点.
2,Store 的生命周期, 应用的一些长期共用数据怎么维护?
可以用 createStore 创建一个 store 作为单例维护, 参考 https://github.com/alibaba/fish-redux/issues/90 .
本文源码地址: https://github.com/hyjfine/flutter_redux_sample/tree/fish-redux-adapter
(完)
来源: https://juejin.im/post/5c91a7cae51d45074f71afb5