fish-redux介绍：https://www.yuque.com/xytech/flutter/ycc9ni
GitHub地址：https://github.com/alibaba/fish-redux
最近接触阿里开源Flutter应用框架Fish Redux，做一下笔记。
1. 实例效果
点击右下角按钮，标题变为Say，内容显示Hello，fish redux
2. 代码环节
新建flutter项目，在pubspec.yaml文件中添加依赖
fish_redux: ^0.1.5
在lib目录下新建effect.dart，reducer.dart，state.dart，view.dart，page.dart五个文件
在state.dart文件中，创建页面状态类，包含标题和内容数据，状态类必须实现Cloneable接口
//创建页面状态类，包含标题和内容数据，状态类必须实现Cloneable接口
class PageState implements Cloneable<PageState> {
String title;
String content;
PageState({this.title, this.content});
@override
PageState clone() {
return PageState()..title = title
..content = content;
}
}
//页面状态初始化方法
PageState initState(Map<String, dynamic> args) {
println('state:initState');
return PageState(title: 'title', content: 'content');
}
action文件，action表示意图、动作的意思
enum PageAction {update} //action类型
class PageActionCreator {
//刷新action，在按钮事件中调用，参数传入要刷新的数据
static Action update(String title, String content) {
println('action:update');
return Action(
PageAction.update, //action类型
payload: <String, String>{'title': title, 'content': content}, //附带数据
);
}
}
reducer文件中，reducer用于接收意图，该文件提供了Reducer，声明Reducer监听的action，实现监听到action的动作
Reducer<PageState> buildReducer() {
println('Reducer:buildReducer');
return asReducer<PageState>(<Object, Reducer<PageState>>{
//这里添加要监听的Action
PageAction.update: _update, //监听到PageAction.update
});
}
PageState _update(PageState state, Action action) {
println('Reducer: _update');
final Map<String, String> update = action.payload ?? <String, String>{};//获取action附带的数据
final PageState newState = state.clone();
newState.title = update['title'] ?? newState.title;
newState.content = update['content'] ?? newState.content;
return newState;
}
view文件提供实现界面的方法
Widget buildView(PageState state, Dispatch dispatch, ViewService viewService) {
println('view: buildView');
return Scaffold(
appBar: AppBar(title: Text(state.title)),
body: Center(child: Text(state.content),),
floatingActionButton: FloatingActionButton(
onPressed: (){
//点击按钮发送意图
dispatch(PageActionCreator.update('Say', 'Hello, fish redux'));
},
child: Icon(Icons.edit),
),
);
}
在page中把view，reducer，view涵盖进来
class MainPage extends Page<PageState, Map<String, dynamic>> {
MainPage():super(
reducer: buildReducer(),
initState: initState,
view: buildView,);
}
最后添加simple_demo文件，构建app，调用MainPage，再运行该文件
main() => runApp(SimpleDemo());
class SimpleDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
println('main');
final AbstractRoutes routes = HybridRoutes(routes: <AbstractRoutes>[
PageRoutes(
pages: <String, Page<Object, dynamic>>{
'main': MainPage(),
},
),
]);
return MaterialApp(
title: 'Simple',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: routes.buildPage('main', null),
);
}
}
3. 运行分析
运行打印结果如下：
I/flutter (26072): main
I/flutter (26072): Reducer:buildReducer
//Syncing files to device MI 5s Plus...
I/flutter (26072): state:initState
I/flutter (26072): view:buildView
点击按钮打印如下
I/flutter (26072): action:update
I/flutter (26072): Reducer: _update
I/flutter (26072): view:buildView
可以分析流程如下：
点击按钮发送Action流程到Reducr，Reducer把数据包装成state再更新到view中
image.png
