Fish redux——阿里闲鱼团队的flutter的开发框架,也是flutter开发使用较为广泛的框架。至于这个框架的实现原理有时间可以看一下阿里的《闲鱼flutter-boot》文档吧,其中第一讲就是fish redux。这里主要结合自己的实践,记录一下自己的使用心得。
引入
environment:
sdk: ">=2.1.0 <3.0.0"
dependencies:
fish_redux: ^0.3.1 //引入最新的fish redux依赖
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
dev_dependencies:
flutter_test:
sdk: flutter
然后Android studio setting中plugins下搜索FishReduxTemplate 并安装。
准备工作完毕,接下来开始进入主题。
开始准备
首先工程目录lib下新建一个包,然后右键 new 选择 FishReduxTemplate,选择page选项。这是就可以开到这个包下有6个dart文件:action、effect、page、reducer、state、view。
这个目录结构是固定的,我们不需要修改。很直观的体会到其中的集中,分治,复用,隔离的原则。
以上部分,主要是针对flutter的UI开发前的准备,这里的page就代表flutter中的一个页面。
流程
盗用一下网上的这个图。再结合page.dart中的代码,让我们更容易理解fish redux工作流程。
class SplashPage extends Page<SplashState, Map<String, dynamic>> {
SplashPage()
: super(
initState: initState,
effect: buildEffect(),
reducer: buildReducer(),
view: buildView,
dependencies: Dependencies<SplashState>(
adapter: null,
slots: <String, Dependent<SplashState>>{
}),
middleware: <Middleware<SplashState>>[
],);
}
一个page是由state 、view、effect、reducer组成。
由一般的开发逻辑出发,我们先看到UI/UE的效果图,从中结合页面内容提炼出我们所关心的数据及状态可变的部分,我们将这些影响页面展示的数据及状态值保存在state中,之后我们开始在view中编写UI/UE部分,用户在使用时,触发UI上面的交互事件,并context.dispatch一个意图给到effect,而这个意图就是action,根据需要在action.dart中进行声明;effect根据意图来进行数据的读取、创建,亦或者进行页面的跳转,这里重点说明effect不对state中数据进行处理;effect中得到的数据通过context.dispatch传递给reducer,而reducer是针对state中相关数据进行处理的,并返回新的state,从而触发页面的刷新。
使用
代码较多,具体使用参照流程进行即可:https://gitee.com/lagman/fish_redux_demo