9、Flutter Fish redux框架的使用

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 并安装。

20200219134129.png

准备工作完毕，接下来开始进入主题。

开始准备

首先工程目录lib下新建一个包，然后右键 new 选择 FishReduxTemplate，选择page选项。这是就可以开到这个包下有6个dart文件：action、effect、page、reducer、state、view。

20200219134544.png

这个目录结构是固定的，我们不需要修改。很直观的体会到其中的集中，分治，复用，隔离的原则。

20200219135016.png

以上部分，主要是针对flutter的UI开发前的准备，这里的page就代表flutter中的一个页面。

流程

20200219135825.png

盗用一下网上的这个图。再结合page.dart中的代码，让我们更容易理解fish redux工作流程。

class SplashPage extends Page> {
  SplashPage()
      : super(
            initState: initState,
            effect: buildEffect(),
            reducer: buildReducer(),
            view: buildView,
            dependencies: Dependencies(
                adapter: null,
                slots: >{
                }),
            middleware: >[
            ],);

}

一个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