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