为啥要使用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/hyjfine/flutter_redux_sample/tree/fish-redux-adapter
(完)
@子路宇, 本文版权属于再惠研发团队,欢迎转载,转载请保留出处。