关于flutter:fishredux使用详解看完就会用

说句心里话，这篇文章，来来回回批改了很屡次，如果认真看完这篇文章，还不会写 fish_redux，请在评论里喷我。

来学学难搞的 fish_redux 框架吧，这个框架，官网的文档真是一言难尽，比 flutter_bloc 官网的文档真是逊色太多了，然而一旦晓得怎么写，页面堆起来也是十分爽呀，构造明显，逻辑也会错落有致。

其实在过后搞懂这个框架的时候，就始终想写一篇文章记录下，然而因为忙（lan），导致始终没写，当初感觉还是必须把应用的过程记录下，毕竟刚上手这个框架是个蛋痛的过程，必须要把这个过程做个记录。

这不仅仅是记录的文章，文中所给出的示例，也是我从新构思去写的，过程也是力求论述分明且具体。

页面切换的转场动画
页面怎么更新数据
fish_redux 各个模块之间，怎么传递数据
页面跳转传值，及其承受下个页面回传的值
怎么配合 ListView 应用
ListView 怎么应用 adapter，数据怎么和 item 绑定
怎么将 Page 当做 widget 应用（BottomNavigationBar，NavigationRail 等等导航栏控件会应用到）
- 这个间接应用：XxxPage.buildPage(null) 即可

如果你在应用 fish_redux 的过程中遇到过上述的问题，那就来看看这篇文章吧！这里，会解答下面所有的问题点！

fish_redux 相干地址

GitHub 地址：https://github.com/alibaba/fish-redux
Pub 地址：https://pub.dev/packages/fish_redux

我用的是 0.3.X 的版本，算是第三版，绝对于前几版，改变较大

引入 fish_redux 插件，想用最新版插件，可进入 pub 地址外面查看

fish_redux: ^0.3.4
#演示列表须要用到的库
dio: ^3.0.9    #网络申请框架
json_annotation: ^2.4.0 #json 序列化和反序列化用的

此处咱们须要装置代码生成插件，能够帮咱们生成大量文件和模板代码
在 Android Studio 外面搜寻”fish“就能搜出插件了，插件名叫：FishReduxTemplate
BakerJQ 编写：Android Studio 的 Fish Redux 模板。
huangjianke 编写：VSCode 的 Fish Redux 模板

这里我在新建的 count 文件夹上，抉择新建文件，抉择：New —> FishReduxTemplate

此处抉择：Page，底下的“Select Fils”全副抉择，这是规范的 redux 文件构造；这边命名倡议应用大驼峰：Count
- Component：这个个别是可复用的相干的组件；列表的 item，也能够抉择这个
- Adapter：这里有三个 Adapter，都能够不必了；fish_redux 第三版推出了性能更弱小的 adapter，更加灵便的绑定形式

创立胜利后，记得在创立的文件夹上右击，抉择：Reload From Disk；把创立的文件刷新进去

创立胜利的文件构造
- page：总页面，注册 effect，reducer，component，adapter 的性能，相干的配置都在此页面操作
- state：这中央就是咱们寄存子模块变量的中央；初始化变量和承受上个页面参数，也在此处，是个很重要的模块
- view：次要是咱们写页面的模块
- action：这是一个十分重要的模块，所有的事件都在此处定义和直达
- effect：相干的业务逻辑，网络申请等等的“副作用”操作，都能够写在该模块
- reducer：该模块次要是用来更新数据的，也能够写一些简略的逻辑或者和数据无关的逻辑操作

OK，至此就把所有的筹备工作搞定了，上面能够开搞代码了

下图是阮一峰老师博客上放的 redux 流程图

在写代码前，先看写下流程图，这图是凭着本人的了解画的
- 能够发现，事件的传递，都是通过 dispatch 这个办法，而且 action 这层很显著是十分要害的一层，事件的传递，都是在该层定义和直达的
- 这图在语雀上调了半天，就在下面加了个本人的 github 水印地址

通过俩个流程图比照，其中还是有一些差异的
- redux 外面的 store 是全局的。fish_redux 外面也有这个全局 store 的概念，放在子模块外面了解 store，react；对应 fish_redux 里的就是：state，view
- fish_redux 外面多了 effect 层：这层次要是解决逻辑，和相干网络申请之类
- reducer 外面，实践上也是能够解决一些和数据相干，简略的逻辑；然而简单的，会产生相应较大的“副作用”的业务逻辑，还是须要在 effect 中写

这边写几个示例，来演示 fish_redux 的应用

计数器
- fish_redux 失常状况下的流转过程
- fish_redux 各模块怎么传递数据
页面跳转
- A —> B（A 跳转到 B，并传值给 B 页面）
- B —> A（B 返回到 A，并返回值给 A 页面）
列表文章
- 列表展现 - 网络申请
- 列表批改 - 单 item 刷新
- 多样式列表
- 列表存在的问题 + 解决方案
全局模块
- 全局切换主题
全局模式优化
- 大幅度晋升开发体验
Component 应用
- page 中应用 component
播送
开发小技巧
- 弱化 reducer
- widget 组合式开发

这个例子演示，view 中点击此操作，而后更新页面数据；下述的流程，在 effect 中把数据处理好，通过 action 直达传递给 reducer 更新数据
- view —> action —> effect —> reducer（更新数据）
留神：该流程将展现，怎么将数据在各流程中相互传递

main
- 这中央须要留神，cupertino，material 这类零碎包和 fish_redux 里蕴含的“Page”类名反复了，须要在这类零碎包上应用 hide，暗藏零碎包里的 Page 类
- 对于页面的切换格调，能够在 MaterialApp 中的 onGenerateRoute 办法中，应用相应页面切换格调，这边应用 ios 的页面切换格调：cupertino

/// 须要应用 hide 暗藏 Page
import 'package:flutter/cupertino.dart'hide Page;
import 'package:flutter/material.dart' hide Page;

void main() {runApp(MyApp());
}

Widget createApp() {
  /// 定义路由
  final AbstractRoutes routes = PageRoutes(
    pages: <String, Page<Object, dynamic>>{"CountPage": CountPage(),
    },
  );

  return MaterialApp(
    title: 'FishDemo',
    home: routes.buildPage("CountPage", null), // 作为默认页面
    onGenerateRoute: (RouteSettings settings) {
      //ios 页面切换格调
      return CupertinoPageRoute(builder: (BuildContext context) {return routes.buildPage(settings.name, settings.arguments);
      })
//      Material 页面切换格调
//      return MaterialPageRoute<Object>(builder: (BuildContext context) {//        return routes.buildPage(settings.name, settings.arguments);
//      });
    },
  );
}

state
- 定义咱们在页面展现的一些变量，initState 中能够初始化变量；clone 办法的赋值写法是必须的

class CountState implements Cloneable<CountState> {
  int count;

  @override
  CountState clone() {return CountState()..count = count;
  }
}

CountState initState(Map<String, dynamic> args) {return CountState()..count = 0;
}

view：这外面就是写界面的模块，buildView 外面有三个参数
- state：这个就是咱们的数据层，页面须要的变量都写在 state 层
- dispatch：相似调度器，调用 action 层中的办法，从而去回调 effect，reducer 层的办法
- viewService：这个参数，咱们能够应用其中的办法：buildComponent(“ 组件名 ”)，调用咱们封装的相干组件

Widget buildView(CountState state, Dispatch dispatch, ViewService viewService) {return _bodyWidget(state, dispatch);
}

Widget _bodyWidget(CountState state, Dispatch dispatch) {
  return Scaffold(
    appBar: AppBar(title: Text("FishRedux"),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[Text('You have pushed the button this many times:'),
          /// 应用 state 中的变量，控住数据的变换
          Text(state.count.toString()),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(onPressed: () {
        /// 点击事件，调用 action 计数自增办法
        dispatch(CountActionCreator.countIncrease());
      },
      child: Icon(Icons.add),
    ),
  );
}

action
- 该层是十分重要的模块，页面所有的行为都能够在本层直观的看到
- XxxxAction 中的枚举字段是必须的，一个事件对应有一个枚举字段，枚举字段是：effect，reducer 层标识的入口
- XxxxActionCreator 类中的办法是直达办法，办法中能够传参数，参数类型可任意；办法中的参数放在 Action 类中的 payload 字段中，而后在 effect，reducer 中的 action 参数中拿到 payload 值去解决就行了
- 这中央须要留神下，默认生成的模板代码，return 的 Action 类加了 const 润饰，如果应用 Action 的 payload 字段赋值并携带数据，是会报错的；所以这里如果须要携带参数，请去掉 const 润饰关键字

enum CountAction {increase, updateCount}

class CountActionCreator {
  /// 去 effect 层去解决自增数据
  static Action countIncrease() {return Action(CountAction.increase);
  }
  /// 去 reducer 层更新数据，传参能够放在 Action 类中的 payload 字段中，payload 是 dynamic 类型，可传任何类型
  static Action updateCount(int count) {return Action(CountAction.updateCount, payload: count);
  }
}

effect
- 如果在调用 action 外面的 XxxxActionCreator 类中的办法，相应的枚举字段，会在 combineEffects 中被调用，在这里，咱们就能写相应的办法解决逻辑，办法中带俩个参数：action，ctx
  - action：该对象中，咱们能够拿到 payload 字段外面，在 action 外面保留的值
  - ctx：该对象中，能够拿到 state 的参数，还能够通过 ctx 调用 dispatch 办法，调用 action 中的办法，在这里调用 dispatch 办法，个别是把解决好的数据，通过 action 直达到 reducer 层中更新数据

Effect<CountState> buildEffect() {
  return combineEffects(<Object, Effect<CountState>>{CountAction.increase: _onIncrease,});
}
/// 自增数
void _onIncrease(Action action, Context<CountState> ctx) {
  /// 解决自增数逻辑
  int count = ctx.state.count + 1;
  ctx.dispatch(CountActionCreator.updateCount(count));
}

reducer
- 该层是更新数据的，action 中调用的 XxxxActionCreator 类中的办法，相应的枚举字段，会在 asReducer 办法中回调，这里就能够写个办法，克隆 state 数据进行一些解决，这外面有俩个参数：state，action
- state 参数常常应用的是 clone 办法，clone 一个新的 state 对象；action 参数根本就是拿到其中的 payload 字段，将其中的值，赋值给 state

Reducer<CountState> buildReducer() {
  return asReducer(
    <Object, Reducer<CountState>>{CountAction.updateCount: _updateCount,},
  );
}
/// 告诉 View 层更新界面
CountState _updateCount(CountState state, Action action) {final CountState newState = state.clone();
  newState..count = action.payload;
  return newState;
}

page 模块不须要改变，这边就不贴代码了

从下面的例子看到，如此简略数据变换，仅仅是个 state 中一个参数自增的过程，effect 层就显得有些多余；所以，把流程简化成上面
- view —> action —> reducer
留神：这边把 effect 层删掉，该层能够舍弃了；而后对 view，action，reducer 层代码进行一些小改变

搞起来

view
- 这边仅仅把点击事件的办法，微微改了下：CountActionCreator.countIncrease() 改成 CountActionCreator.updateCount()

Widget buildView(CountState state, Dispatch dispatch, ViewService viewService) {return _bodyWidget(state, dispatch);
}

Widget _bodyWidget(CountState state, Dispatch dispatch) {
  return Scaffold(
    appBar: AppBar(title: Text("FishRedux"),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[Text('You have pushed the button this many times:'),
          Text(state.count.toString()),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(onPressed: () {
        /// 点击事件，调用 action 计数自增办法
        dispatch(CountActionCreator.updateCount());
      },
      child: Icon(Icons.add),
    ),
  );
}

action
- 这里只应用一个枚举字段，和一个办法就行了，也不必传啥参数了

enum CountAction {updateCount}

class CountActionCreator {
  /// 去 reducer 层更新数据，传参能够放在 Action 类中的 payload 字段中，payload 是 dynamic 类型，可传任何类型
  static Action updateCount() {return Action(CountAction.updateCount);
  }
}

reducer
- 这里间接在：_updateCount 办法中解决下简略的自增逻辑

Reducer<CountState> buildReducer() {
  return asReducer(
    <Object, Reducer<CountState>>{CountAction.updateCount: _updateCount,},
  );
}
/// 告诉 View 层更新界面
CountState _updateCount(CountState state, Action action) {final CountState newState = state.clone();
  newState..count = state.count + 1;
  return newState;
}

能够看见优化了后，代码量减少了很多，看待不同的业务场景，能够灵便的变动，应用框架，但不要拘泥框架；然而如果有网络申请，很简单的业务逻辑，就万万不能写在 reducer 外面了，肯定要写在 effect 中，这样能力保障一个清晰的解耦构造，保障解决数据和更新数据过程拆散

从效果图，很容易看到，俩个页面互相传值
- FirstPage —> SecondPage（FirstPage 跳转到 SecondPage，并传值给 SecondPage 页面）
- SecondPage —> FirstPage（SecondPage 返回到 FirstPage，并返回值给 FirstPage 页面）

从下面效果图上看，很显著，这边须要实现俩个页面，先看看 main 页面的改变
main
- 这里只减少了俩个页面：FirstPage 和 SecondPage；并将主页面入口换成了：FirstPage

Widget createApp() {
  /// 定义路由
  final AbstractRoutes routes = PageRoutes(
    pages: <String, Page<Object, dynamic>>{
      /// 计数器模块演示
      "CountPage": CountPage(),
      /// 页面传值跳转模块演示
      "FirstPage": FirstPage(),
      "SecondPage": SecondPage(),},
  );

  return MaterialApp(
    title: 'FishRedux',
    home: routes.buildPage("FirstPage", null), // 作为默认页面
    onGenerateRoute: (RouteSettings settings) {
      //ios 页面切换格调
      return CupertinoPageRoute(builder: (BuildContext context) {return routes.buildPage(settings.name, settings.arguments);
      });
    },
  );
}

先来看看该页面的一个流程
- view —> action —> effect（跳转到 SecondPage 页面）
- effect（拿到 SecondPage 返回的数据）—> action —> reducer（更新页面数据）
state
- 先写 state 文件，这边须要定义俩个变量来
  - fixedMsg：这个是传给下个页面的值
  - msg：在页面上展现传值得变量
- initState 办法是初始化变量和承受页面传值的，这边咱们给他赋个初始值

class FirstState implements Cloneable<FirstState> {
  /// 传递给下个页面的值
  static const String fixedMsg = "\n 我是 FirstPage 页面传递过去的数据：FirstValue";
  /// 展现传递过去的值
  String msg;

  @override
  FirstState clone() {return FirstState()..msg = msg;
  }
}

FirstState initState(Map<String, dynamic> args) {return FirstState()..msg = "\n 暂无";
}

view
- 该页面逻辑相当简略，次要的仅仅是在 onPressed 办法中解决逻辑

Widget buildView(FirstState state, Dispatch dispatch, ViewService viewService) {return _bodyWidget(state, dispatch);
}

Widget _bodyWidget(FirstState state, Dispatch dispatch) {
  return Scaffold(
    appBar: AppBar(title: Text("FirstPage"),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[Text('下方数据是 SecondPage 页面传递过去的:'),
          Text(state.msg),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(onPressed: () {
        /// 跳转到 Second 页面
        dispatch(FirstActionCreator.toSecond());
      },
      child: Icon(Icons.arrow_forward),
    ),
  );
}

action：这里须要定义俩个枚举事件
- toSecond：跳转到 SecondPage 页面
- updateMsg：拿到 SecondPage 页面返回的数据，而后更新页面数据

enum FirstAction {toSecond , updateMsg}

class FirstActionCreator {
  /// 跳转到第二个页面
  static Action toSecond() {return const Action(FirstAction.toSecond);
  }
  /// 拿到第二个页面返回的数据, 执行更新数据操作
  static Action updateMsg(String msg) {return Action(FirstAction.updateMsg, payload: msg);
  }
}

effect
- 此处须要留神：fish_redux 框架中的 Action 类和零碎包中的重名了，须要把零碎包中 Action 类暗藏掉
- 传值间接用 pushNamed 办法即可，携带的参数能够写在 arguments 字段中；pushNamed 返回值是 Future 类型，如果想获取他的返回值，跳转办法就须要写成异步的，期待从 SecondPage 页面获取返回的值，

/// 应用 hide 办法，暗藏零碎包外面的 Action 类
import 'package:flutter/cupertino.dart' hide Action;

Effect<FirstState> buildEffect() {
  return combineEffects(<Object, Effect<FirstState>>{FirstAction.toSecond: _toSecond,});
}

void _toSecond(Action action, Context<FirstState> ctx) async{
  /// 页面之间传值；这中央必须写个异步办法，期待上个页面回传过去的值；as 关键字是类型转换
  var result = await Navigator.of(ctx.context).pushNamed("SecondPage", arguments: {"firstValue": FirstState.fixedMsg});
  /// 获取到数据，更新页面上的数据
  ctx.dispatch(FirstActionCreator.updateMsg( (result as Map)["secondValue"]) );
}

reducer
- 这里就是从 action 外面获取传递的值，赋值给克隆对象中 msg 字段即可

Reducer<FirstState> buildReducer() {
  return asReducer(
    <Object, Reducer<FirstState>>{FirstAction.updateMsg: _updateMsg,},
  );
}

FirstState _updateMsg(FirstState state, Action action) {return state.clone()..msg = action.payload;
}

这个页面比较简单，后续不波及到页面数据更新，所以 reducer 模块能够不写，看看该页面的流程
- view —> action —> effect（pop 以后页面，并携带值返回）
state
- 该模块的变量和 FirstPage 类型，就不论述了
- initState 外面通过 args 变量获取上个页面传递的值，上个页面传值须要传递 Map 类型，这边通过 key 获取相应的 value

class SecondState implements Cloneable<SecondState> {
  /// 传递给下个页面的值
  static const String fixedMsg = "\n 我是 SecondPage 页面传递过去的数据：SecondValue";
  /// 展现传递过去的值
  String msg;

  @override
  SecondState clone() {return SecondState()..msg = msg;
  }
}

SecondState initState(Map<String, dynamic> args) {
  /// 获取上个页面传递过去的数据
  return SecondState()..msg = args["firstValue"];
}

view
- 这边须要留神的就是：WillPopScope 控件接管 AppBar 的返回事件

Widget buildView(SecondState state, Dispatch dispatch, ViewService viewService) {
  return WillPopScope(child: _bodyWidget(state),
    onWillPop: () {dispatch(SecondActionCreator.backFirst());
      ///true：示意执行页面返回    false: 示意不执行返回页面操作，这里因为要传值，所以接管返回操作
      return Future.value(false);
    },
  );
}

Widget _bodyWidget(SecondState state) {
  return Scaffold(
    appBar: AppBar(title: Text("SecondPage"),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[Text('下方数据是 FirstPage 页面传递过去的:'),
          Text(state.msg),
        ],
      ),
    ),
  );
}

action

enum SecondAction {backFirst}

class SecondActionCreator {
  /// 返回到第一个页面，而后从栈中移除本身，同时传回去一些数据
  static Action backFirst() {return Action(SecondAction.backFirst);
  }
}

effect
- 此处同样须要暗藏零碎包中的 Action 类
- 这边间接在 pop 办法的第二个参数，写入返回数据

/// 暗藏零碎包中的 Action 类
import 'package:flutter/cupertino.dart' hide Action;

Effect<SecondState> buildEffect() {
  return combineEffects(<Object, Effect<SecondState>>{SecondAction.backFirst: _backFirst,});
}

void _backFirst(Action action, Context<SecondState> ctx) {
  ///pop 以后页面，并且返回相应的数据
  Navigator.pop(ctx.context, {"secondValue": SecondState.fixedMsg});
}

因为 page 模块不须要改变，所以就没必要将 page 模块代码附上了哈
OK，到这里，咱们也曾经把俩个页面互相传值的形式 get 到了！

了解了下面俩个案例，置信你能够应用 fish_redux 实现一部分页面了；然而，咱们堆页面的过程中，能领会列表模块是十分重要的一部分，当初就来学学，在 fish_redux 中怎么应用 ListView 吧！
- 废话少说，上号！

效果图对于列表的滚动，做了俩个操作：一个是拖拽列表；另一个是滚动鼠标的滚轮。flutter 对鼠标触发的相干事件也反对的越来越好了！
- 这边咱们应用的是玩 Android 的 api，这个 api 有个坑的中央，没设置开启跨域，所以运行在 web 上，这个 api 应用会报错，我在玩 Android 的 github 上提了 issue，哎，也不晓得作者啥时候解决，，，
这中央只能曲线救国，敞开浏览器跨域限度，设置看这里：https://www.jianshu.com/p/56b…
如果运行在虚拟机上，就齐全不会呈现这个问题！

先看下文件构造

main
- 这边改变十分小，只在路由里，新增了：GuidePage，ListPage；同时将 home 字段中的默认页面，改成了：GuidePage 页面；导航页面代码就不贴在文章里了，上面贴下该页面链接
  - https://github.com/CNAD666/Ex…
- ListPage 才是重点，下文会具体阐明

void main() {runApp(createApp());
}

Widget createApp() {
  /// 定义路由
  final AbstractRoutes routes = PageRoutes(
    pages: <String, Page<Object, dynamic>>{
      /// 导航页面
      "GuidePage": GuidePage(),
      /// 计数器模块演示
      "CountPage": CountPage(),
      /// 页面传值跳转模块演示
      "FirstPage": FirstPage(),
      "SecondPage": SecondPage(),
      /// 列表模块演示
      "ListPage": ListPage(),},
  );

  return MaterialApp(
    title: 'FishRedux',
    home: routes.buildPage("GuidePage", null), // 作为默认页面
    onGenerateRoute: (RouteSettings settings) {
      //ios 页面切换格调
      return CupertinoPageRoute(builder: (BuildContext context) {return routes.buildPage(settings.name, settings.arguments);
      });
    },
  );
}

Adapter 实现的流程
- 创立 item(Component) —> 创立 adapter 文件 —> state 集成相应的 Source —> page 外面绑定 adapter
通过以上四步，就能在 fish_redux 应用相应列表外面的 adapter 了，过程有点麻烦，然而游刃有余，多用用就能很快搭建一个简单的列表了
总流程：初始化列表模块 —> item 模块 —> 列表模块逻辑欠缺
- 初始化列表模块
  - 这个就是失常的创立 fish_redux 模板代码和文件
- item 模块
  - 依据接口返回 json，创立相应的 bean —> 创立 item 模块 —> 编写 state —> 编写 view 界面
- 列表模块逻辑欠缺 ：俩中央分俩步（adapter 创立及其绑定，失常 page 页面编辑）
  - 创立 adapter 文件 —> state 调整 —> page 中绑定 adapter
  - view 模块编写 —> action 增加更新数据事件 —> effect 初始化时获取数据并解决 —> reducer 更新数据
整体流程的确有些多，然而咱们依照整体三步流程流程走，保障思路清晰就行了

此处新建个文件夹，在文件夹上新建 fis_redux 文件就行了；这中央，咱们抉择 page，整体的五个文件：action，effect，reducer，state，view；全副都要用到，所以默认全选，填入 Module 的名字，点击 OK

依照流程走

依据接口返回 json，创立相应的 bean —> 创立 item 模块 —> 编写 state —> 编写 view 界面

筹备工作

创立 bean 实体
- 依据 api 返回的 json 数据，生成相应的实体
  - api：https://www.wanandroid.com/pr…
- json 转实体
  - 网站：https://javiercbk.github.io/j…
  - 插件：AS 中能够搜寻：FlutterJsonBeanFactory
- 这中央生成了：ItemDetailBean；代码俩百多行就不贴了，具体的内容，点击上面链接
  - ItemDetailBean 代码：https://github.com/CNAD666/Ex…
创立 item 模块
- 这边咱们实现一个简略的列表，item 仅仅做展现性能；不做点击，更新 ui 等操作，所以这边咱们就不须要创立：effect，reducer，action 文件；只抉择：state 和 view 就行了
- 创立 item，这里抉择 component

文件构造

OK，bean 文件搞定了，再来看看，item 文件中的文件，这里 component 文件不须要改变，所以这中央，咱们只须要看：state.dart，view.dart

state
- 这中央还是惯例的写法，因为 json 生成的 bean 外面，能用到的所有数据，都在 Datas 类外面，所以，这中央建一个 Datas 类的变量即可
- 因为，没用到 reducer，实际上 clone 实现办法都能删掉，避免前面可能须要 clone 对象，暂且留着

import 'package:fish_redux/fish_redux.dart';
import 'package:fish_redux_demo/list/bean/item_detail_bean.dart';

class ItemState implements Cloneable<ItemState> {
  Datas itemDetail;

  ItemState({this.itemDetail});

  @override
  ItemState clone() {return ItemState()
        ..itemDetail = itemDetail;
  }
}

ItemState initState(Map<String, dynamic> args) {return ItemState();
}

view
- 这里 item 布局稍稍有点麻烦，整体上采纳的是：程度布局（Row），分左右俩大块
  - 右边：单纯的图片展现
  - 左边：采纳了纵向布局（Column），联合 Expanded 造成比例布局，别离展现三块货色：题目，内容，作者和工夫
- OK，这边 view 只是简略用到了 state 提供的数据造成的布局，没有什么要特地留神的中央

Widget buildView(ItemState state, Dispatch dispatch, ViewService viewService) {return _bodyWidget(state);
}

Widget _bodyWidget(ItemState state) {
  return Card(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
    elevation: 5,
    margin: EdgeInsets.only(left: 20, right: 20, top: 20),
    child: Row(
      children: <Widget>[
        // 右边图片
        Container(margin: EdgeInsets.all(10),
          width: 180,
          height: 100,
          child: Image.network(
            state.itemDetail.envelopePic,
            fit: BoxFit.fill,
          ),
        ),
        // 左边的纵向布局
        _rightContent(state),
      ],
    ),
  );
}

///item 中左边的纵向布局, 比例布局
Widget _rightContent(ItemState state) {
  return Expanded(
      child: Container(margin: EdgeInsets.all(10),
    height: 120,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        // 题目
        Expanded(
          flex: 2,
          child: Container(
            alignment: Alignment.centerLeft,
            child: Text(
              state.itemDetail.title,
              style: TextStyle(fontSize: 16),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ),
        // 内容
        Expanded(
            flex: 4,
            child: Container(
              alignment: Alignment.centerLeft,
              child: Text(
                state.itemDetail.desc,
                style: TextStyle(fontSize: 12),
                maxLines: 3,
                overflow: TextOverflow.ellipsis,
              ),
            )),
        Expanded(
          flex: 3,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              // 作者
              Row(
                children: <Widget>[Text("作者：", style: TextStyle(fontSize: 12)),
                  Expanded(
                    child: Text(state.itemDetail.author,
                        style: TextStyle(color: Colors.blue, fontSize: 12),
                        overflow: TextOverflow.ellipsis),
                  )
                ],
              ),
              // 工夫
              Row(children: <Widget>[Text("工夫：", style: TextStyle(fontSize: 12)),
                Expanded(
                  child: Text(state.itemDetail.niceDate,
                      style: TextStyle(color: Colors.blue, fontSize: 12),
                      overflow: TextOverflow.ellipsis),
                )
              ])
            ],
          ),
        ),
      ],
    ),
  ));
}

item 模块，就这样写完了，不须要改变什么了，接下来看看 List 模块

首先最重要的，咱们须要将 adapter 建设起来，并和 page 绑定

创立 adapter 文件 —> state 调整 —> page 中绑定 adapter

adapter 创立及其绑定

创立 adapter
- 首先须要创立 adapter 文件，而后写入上面代码：这中央须要继承 SourceFlowAdapter 适配器，外面的泛型须要填入 ListState，ListState 这中央会报错，因为咱们的 ListState 没有继承 MutableSource，上面 state 的调整就是对这个的解决
- ListItemAdapter 的构造函数就是通用的写法了，在 super 外面写入咱们下面写好 item 款式，这是个 pool 应该能够了解为款式池，这个 key 最好都提出来，因为在 state 模块还须要用到，能够定义多个不同的 item，很容易做成多样式 item 的列表；目前，咱们这边只须要用一个，填入：ItemComponent()

class ListItemAdapter extends SourceFlowAdapter<ListState> {
  static const String item_style = "project_tab_item";

  ListItemAdapter()
      : super(
          pool: <String, Component<Object>>{
            /// 定义 item 的款式
            item_style: ItemComponent(),},
        );
}

state 调整
- state 文件中的代码须要做一些调整，须要继承相应的类，和 adapter 建设起关联
- ListState 须要继承 MutableSource；还必须定义一个泛型是 item 的 ItemState 类型的 List，这俩个是必须的；而后实现相应的形象办法就行了
- 这里只有向 items 里写入 ItemState 的数据，列表就会更新了

class ListState extends MutableSource implements Cloneable<ListState> {
  /// 这中央肯定要留神,List 外面的泛型, 须要定义为 ItemState
  /// 怎么更新列表数据, 只须要更新这个 items 外面的数据, 列表数据就会相应更新
  /// 应用多样式, 请写出  List<Object> items;
  List<ItemState> items;

  @override
  ListState clone() {return ListState()..items = items;
  }

  /// 应用下面定义的 List, 继承 MutableSource, 就把列表和 item 绑定起来了
  @override
  Object getItemData(int index) => items[index];

  @override
  String getItemType(int index) => ListItemAdapter.item_style;

  @override
  int get itemCount => items.length;

  @override
  void setItemData(int index, Object data) {items[index] = data;
  }
}

ListState initState(Map<String, dynamic> args) {return ListState();
}

page 中绑定 adapter
- 这里就是将咱们的 ListSate 和 ListItemAdapter 适配器建设起连贯

class ListPage extends Page<ListState, Map<String, dynamic>> {ListPage()
      : super(
          initState: initState,
          effect: buildEffect(),
          reducer: buildReducer(),
          view: buildView,
          dependencies: Dependencies<ListState>(
              /// 绑定 Adapter
              adapter: NoneConn<ListState>() + ListItemAdapter(),
              slots: <String, Dependent<ListState>>{}),
          middleware: <Middleware<ListState>>[],);
}

失常 page 页面编辑

整体流程

view 模块编写 —> action 增加更新数据事件 —> effect 初始化时获取数据并解决 —> reducer 更新数据
view
- 这外面的列表应用就相当简略了，填入 itemBuilder 和 itemCount 参数就行了，这里就须要用 viewService 参数了哈

Widget buildView(ListState state, Dispatch dispatch, ViewService viewService) {
  return Scaffold(
    appBar: AppBar(title: Text("ListPage"),
    ),
    body: _itemWidget(state, viewService),
  );
}

Widget _itemWidget(ListState state, ViewService viewService) {if (state.items != null) {
    /// 应用列表
    return ListView.builder(itemBuilder: viewService.buildAdapter().itemBuilder,
      itemCount: viewService.buildAdapter().itemCount,);
  } else {
    return Center(child: CircularProgressIndicator(),
    );
  }
}

action
- 只须要写个更新 items 的事件就 ok 了

enum ListAction {updateItem}

class ListActionCreator {static Action updateItem(var list) {return Action(ListAction.updateItem, payload: list);
  }
}

effect
- Lifecycle.initState 是进入页面初始化的回调，这边能够间接用这个状态回调，来申请接口获取相应的数据，而后去更新列表
- 这中央有个坑，dio 必须联合 json 序列号和反序列的库一起用，不然 Dio 无奈将数据源解析成 Response 类型

Effect<ListState> buildEffect() {
  return combineEffects(<Object, Effect<ListState>>{
    /// 进入页面就执行的初始化操作
    Lifecycle.initState: _init,
  });
}

void _init(Action action, Context<ListState> ctx) async {
  String apiUrl = "https://www.wanandroid.com/project/list/1/json";
  Response response = await Dio().get(apiUrl);
  ItemDetailBean itemDetailBean =
      ItemDetailBean.fromJson(json.decode(response.toString()));
  List<Datas> itemDetails = itemDetailBean.data.datas;
  /// 构建符合要求的列表数据源
  List<ItemState> items = List.generate(itemDetails.length, (index) {return ItemState(itemDetail: itemDetails[index]);
  });
  /// 告诉更新列表数据源
  ctx.dispatch(ListActionCreator.updateItem(items));
}

reducer
- 最初就是更新操作了哈，这里就是惯例写法了

Reducer<ListState> buildReducer() {
  return asReducer(
    <Object, Reducer<ListState>>{ListAction.updateItem: _updateItem,},
  );
}

ListState _updateItem(ListState state, Action action) {return state.clone()..items = action.payload;
}

这次来演示列表的单 item 更新，没有网络申请的操作，所以代码逻辑就相当简略了

来看看代码构造

这中央很显著得发现，list_edit 主体文件很少，因为这边间接在 state 里初始化了数据源，就没有前期更新数据的操作，所以就不须要：action，effect，reducer 这三个文件！item 模块则间接在 reducer 里更新数据，不波及相干简单的逻辑，所以不须要：effect 文件。

这次列表模块是十分的简略，根本不波及什么流程，就是最根本初始化的一个过程，将 state 里初始化的数据在 view 中展现
- state —> view
state
- 老规矩，先来看看 state 中的代码
- 这里一些新建了变量，泛型是 ItemState（item 的 State），items 变量初始化了一组数据；而后，同样继承了 MutableSource，实现其相干办法

class ListEditState extends MutableSource implements Cloneable<ListEditState> {
  List<ItemState> items;

  @override
  ListEditState clone() {return ListEditState()..items = items;
  }

  @override
  Object getItemData(int index) => items[index];

  @override
  String getItemType(int index) => ListItemAdapter.itemName;

  @override
  int get itemCount => items.length;

  @override
  void setItemData(int index, Object data) {items[index] = data;
  }
}

ListEditState initState(Map<String, dynamic> args) {return ListEditState()
    ..items = [ItemState(id: 1, title: "列表 Item-1", itemStatus: false),
      ItemState(id: 2, title: "列表 Item-2", itemStatus: false),
      ItemState(id: 3, title: "列表 Item-3", itemStatus: false),
      ItemState(id: 4, title: "列表 Item-4", itemStatus: false),
      ItemState(id: 5, title: "列表 Item-5", itemStatus: false),
      ItemState(id: 6, title: "列表 Item-6", itemStatus: false),
    ];
}

view
- view 的代码主体仅仅是个 ListView.builder，没有什么额定 Widget

Widget buildView(ListEditState state, Dispatch dispatch, ViewService viewService) {
  return Scaffold(
    appBar: AppBar(title: Text("ListEditPage"),
    ),
    body: ListView.builder(itemBuilder: viewService.buildAdapter().itemBuilder,
      itemCount: viewService.buildAdapter().itemCount,),
  );
}

adapter
- 和下面类型，adapter 继承 SourceFlowAdapter 适配器

class ListItemAdapter extends SourceFlowAdapter<ListEditState> {
  static const String itemName = "item";

  ListItemAdapter()
      : super(pool: <String, Component<Object>>{itemName: ItemComponent()},
        );
}

page
- 在 page 外面绑定 adapter

class ListEditPage extends Page<ListEditState, Map<String, dynamic>> {ListEditPage()
      : super(
    initState: initState,
    view: buildView,
    dependencies: Dependencies<ListEditState>(
        /// 绑定适配器
        adapter: NoneConn<ListEditState>() + ListItemAdapter(),
        slots: <String, Dependent<ListEditState>>{}),
    middleware: <Middleware<ListEditState>>[],);
}

接下就是比拟重要的 item 模块了，item 模块的流程，也是十分的清晰
- view —> action —> reducer
state
- 老规矩，先来看看 state 外面的代码；此处就是写惯例变量的定义，这些在 view 中都能用得着

class ItemState implements Cloneable<ItemState> {
  int id;
  String title;
  bool itemStatus;


  ItemState({this.id, this.title, this.itemStatus});

  @override
  ItemState clone() {return ItemState()
      ..title = title
      ..itemStatus = itemStatus
      ..id = id;
  }
}

ItemState initState(Map<String, dynamic> args) {return ItemState();
}

view
- 能够看到 Checkbox 的外部点击操作，咱们传递了一个 id 参数，留神这个 id 参数是必须的，在更新 item 的时候来做辨别用的

Widget buildView(ItemState state, Dispatch dispatch, ViewService viewService) {
  return Container(
    child: InkWell(onTap: () {},
      child: ListTile(title: Text(state.title),
        trailing: Checkbox(
          value: state.itemStatus,
          ///Checkbox 的点击操作：状态变更
          onChanged: (value) => dispatch(ItemActionCreator.onChange(state.id)),
        ),
      ),
    ),
  );
}

action
- 一个状态扭转的事件

enum ItemAction {onChange}

class ItemActionCreator {
  // 状态扭转
  static Action onChange(int id) {return Action(ItemAction.onChange, payload: id);
  }
}

reducer
- _onChange 会回调所有 ItemState，所以这中央必须用 id 或其它惟一标识去界定，咱们所操作的 item 具体是哪一个
- _onChange 办法，未操作的 item 返回的时候要留神，须要返回：state 原对象，表明该 state 对象未变动，其 item 不须要刷新；不能返回 state.clone()，这样返回的就是个全新的 state 对象，每个 item 都会刷新，还会造成一个很奇怪的 bug，会造成后续点击 item 操作失灵

Reducer<ItemState> buildReducer() {
  return asReducer(
    <Object, Reducer<ItemState>>{ItemAction.onChange: _onChange,},
  );
}

ItemState _onChange(ItemState state, Action action) {if (state.id == action.payload) {return state.clone()..itemStatus = !state.itemStatus;
  }
  /// 这中央肯定要留神，要返回:state；不能返回:state.clone()，否则会造成后续更新失灵
  return state;
}

留神： 如果应用多样式，items 的列表泛型不要写成 ItemState，写成 Object 就行了；在上面代码，咱们能够看到，实现的 getItemData() 办法返回的类型是 Object，所以 Items 的列表泛型写成 Object，是齐全能够的。

咱们定义数据源的时候把泛型写成 Object 是齐全能够的，然而初始化数据的时候肯定要留神，写成对应 adapter 类型外面的 state
假如一种状况，在 index 是奇数时展现：OneComponent；在 index 是奇数时展现：TwoComponent；
- getItemType：这个重写办法外面，在 index 为奇偶数时别离返回：OneComponent 和 TwoComponent 的标识
- 数据赋值时也肯定要在 index 为奇偶数时赋值泛型别离为：OneState 和 TwoState
也能够这样优化去做，在 getItemType 外面判断以后泛型是什么数据类型，而后再返回对应的 XxxxComponent 的标识
数据源的数据类型必须和 getItemType 返回的 XxxxComponent 的标识绝对应，如果数据源搞成 Object 类型，映射到对应地位的 item 数据时，会报类型不适配的谬误

下述代码可做思路参考

class ListState extends MutableSource implements Cloneable<PackageCardState> {
    List<Object> items;

    @override
    ListState clone() {return PackageCardState()..items = items;
    }

    @override
    Object getItemData(int index) => items[index];

    @override
    String getItemType(int index) {if(items[index] is OneState) {return PackageCardAdapter.itemStyleOne;}else{return PackageCardAdapter.itemStyleTwo;}
    }

    @override
    int get itemCount => items.length;

    @override
    void setItemData(int index, Object data) => items[index] = data;
}

这里搞定了单 item 刷新场景，还存在一种多 item 刷新的场景

阐明下，列表 item 是没方法一次刷新多个 item 的，只能一次刷新一个 item（一个 clone 对应着一次刷新），一个事件对应着刷新一个 item；这边是打印多个日志剖析进去了
解决：解决办法是，多个事件去解决刷新操作

举例：假如一种场景，对于下面的 item 只能单选，一个 item 项被选中，其它 item 状态被重置到未选状态，具体成果看下方效果图

效果图

这种成果的实现非常简单，然而如果思路不对，会掉进坑里出不来
还原被选的状态，不能在同一个事件里写，须要新写一个革除事件

下述代码为整体流程

view

Widget buildView(ItemState state, Dispatch dispatch, ViewService viewService) {
  return InkWell(onTap: () {},
    child: ListTile(title: Text(state.title),
      trailing: Checkbox(
        value: state.itemStatus,
        ///CheckBox 的点击操作：状态变更
        onChanged: (value) {
          // 单选模式, 革除选中的 item, 以便做单选
          dispatch(ItemActionCreator.clear());

          // 刷新选中 item
          dispatch(ItemActionCreator.onChange(state.id));
        }
      ),
    ),
  );
}

action

enum ItemAction {
  onChange,
  clear,
}

class ItemActionCreator {
  // 状态扭转
  static Action onChange(int id) {return Action(ItemAction.onChange, payload: id);
  }

  // 革除扭转的状态
  static Action clear() {return Action(ItemAction.clear);
  }
}

reducer

Reducer<ItemState> buildReducer() {
  return asReducer(
    <Object, Reducer<ItemState>>{
      ItemAction.onChange: _onChange,
      ItemAction.clear: _clear,
    },
  );
}

ItemState _onChange(ItemState state, Action action) {if (state.id == action.payload) {return state.clone()..itemStatus = !state.itemStatus;
  }

  /// 这中央肯定要留神，要返回:state；不能返回:state.clone()，否则会造成后续更新失灵
  return state;
}

/// 单选模式
ItemState _clear(ItemState state, Action action) {if (state.itemStatus) {return state.clone()..itemStatus = false;
  }

  /// 这中央肯定要留神，要返回:state；不能返回:state.clone()，否则会造成后续更新失灵
  return state;
}

这个问题实际上解决起来很简略，然而如果始终在 _onChange 办法重置状态，你会发现和你预期的后果始终对不上；残缺且具体的成果，能够去看 demo 外面代码

呼，终于将列表这块写完，说实话，这个列表的应用的确有点麻烦；实际上，如果大家用心看了的话，麻烦的中央，其实就是在这块：adapter 创立及其绑定 ；只能多写写了，游刃有余！
列表模块功败垂成，当前就能欢快的写列表了！

了解了下面的是三个例子，置信大部分页面，对于你来说都不在话下了；当初咱们再来看个例子，官网提供的全局主题性能，当然，这不仅仅是全局主题，全局字体款式，字体大小等等，都是能够全局治理，当然了，写 app 之前要做好布局

文件构造
- 这中央须要新建一个文件夹，新建四个文件：action，reducer，state，store

state
- 老规矩，先来看看 state，咱们这里只在抽象类外面定义了一个主题色，这个抽象类是很重要的，须要做全局模式所有子模块的 state，都必须实现这个抽象类

abstract class GlobalBaseState{Color themeColor;}

class GlobalState implements GlobalBaseState, Cloneable<GlobalState>{
  @override
  Color themeColor;

  @override
  GlobalState clone() {return GlobalState();
  }
}

action
- 因为只做切换主题色，这中央只须要定义一个事件即可

enum GlobalAction {changeThemeColor}

class GlobalActionCreator{static Action onChangeThemeColor(){return const Action(GlobalAction.changeThemeColor);
  }
}

reducer
- 这里就是解决变色的一些操作，这是咸鱼官网 demo 外面代码；这阐明简略的逻辑，是能够放在 reducer 外面写的

import 'package:flutter/material.dart' hide Action;

Reducer<GlobalState> buildReducer(){
  return asReducer(
    <Object, Reducer<GlobalState>>{GlobalAction.changeThemeColor: _onChangeThemeColor,},
  );
}

List<Color> _colors = <Color>[
  Colors.green,
  Colors.red,
  Colors.black,
  Colors.blue
];

GlobalState _onChangeThemeColor(GlobalState state, Action action) {
  final Color next =
  _colors[((_colors.indexOf(state.themeColor) + 1) % _colors.length)];
  return state.clone()..themeColor = next;}

store
- 切换全局状态的时候，就须要调用这个类了

/// 建设一个 AppStore
/// 目前它的性能只有切换主题
class GlobalStore{
  static Store<GlobalState> _globalStore;
  static Store<GlobalState> get store => _globalStore ??= createStore<GlobalState>(GlobalState(), buildReducer());
}

这外面将 PageRoutes 外面的 visitor 字段应用起来，状态更新操作代码有点多，就独自提出来了；所以 main 文件外面，减少了：
- visitor 字段应用
- 减少_updateState 办法

void main() {runApp(createApp());
}

Widget createApp() {
  /// 全局状态更新
  _updateState() {return (Object pageState, GlobalState appState) {
      final GlobalBaseState p = pageState;

      if (pageState is Cloneable) {final Object copy = pageState.clone();
        final GlobalBaseState newState = copy;
        if (p.themeColor != appState.themeColor) {newState.themeColor = appState.themeColor;}
        /// 返回新的 state 并将数据设置到 ui
        return newState;
      }
      return pageState;
    };
  }
  
  final AbstractRoutes routes = PageRoutes(/// 全局状态治理: 只有特定的范畴的 Page(State 继承了全局状态), 才须要建设和 AppStore 的连贯关系
    visitor: (String path, Page<Object, dynamic> page) {if (page.isTypeof<GlobalBaseState>()) {
        /// 建设 AppStore 驱动 PageStore 的单向数据连贯：参数 1 AppStore  参数 2 当 AppStore.state 变动时,PageStore.state 该如何变动
        page.connectExtraStore<GlobalState>(GlobalStore.store, _updateState());
      }
    },

    /// 定义路由
    pages: <String, Page<Object, dynamic>>{
      /// 导航页面
      "GuidePage": GuidePage(),
      /// 计数器模块演示
      "CountPage": CountPage(),
      /// 页面传值跳转模块演示
      "FirstPage": FirstPage(),
      "SecondPage": SecondPage(),
      /// 列表模块演示
      "ListPage": ListPage(),},
  );

  return MaterialApp(
    title: 'FishRedux',
    home: routes.buildPage("GuidePage", null), // 作为默认页面
    onGenerateRoute: (RouteSettings settings) {
      //ios 页面切换格调
      return CupertinoPageRoute(builder: (BuildContext context) {return routes.buildPage(settings.name, settings.arguments);
      });
    },
  );
}

这里就用计数器模块的来举例，因为仅仅只须要改变大量代码，且只波及 state 和 view，所以其它模块代码也不反复贴出了
state
- 这中央，仅仅让 CountState 多实现了 GlobalBaseState 类，很小的改变

class CountState implements Cloneable<CountState>,GlobalBaseState {
  int count;

  @override
  CountState clone() {return CountState()..count = count;
  }

  @override
  Color themeColor;
}

CountState initState(Map<String, dynamic> args) {return CountState()..count = 0;
}

view
- 这外面仅仅改变了一行，在 AppBar 外面加了 backgroundColor，而后应用 state 外面的全局主题色

Widget buildView(CountState state, Dispatch dispatch, ViewService viewService) {return _bodyWidget(state, dispatch);
}

Widget _bodyWidget(CountState state, Dispatch dispatch) {
  return Scaffold(
    appBar: AppBar(title: Text("FishRedux"),
      /// 全局主题，仅仅在此处改变了一行
      backgroundColor: state.themeColor,
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[Text('You have pushed the button this many times:'),
          Text(state.count.toString()),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(onPressed: () {
        /// 点击事件，调用 action 计数自增办法
        dispatch(CountActionCreator.updateCount());
      },
      child: Icon(Icons.add),
    ),
  );
}

如果其余模块也须要做主题色，也依照此处逻辑改变即可

调用状态更新就非常简单了，和失常模块更新 View 一样，这里咱们调用全局的就行了，一行代码搞定，在须要的中央调用就 OK 了

GlobalStore.store.dispatch(GlobalActionCreator.onChangeThemeColor());

通过下面的的三步，咱们就能够应用全局状态了；从上体面模块的应用，能够很显著的感触到，全局状态，必须后期做好字段的布局，确定之后，最好不要再减少字段，不然继承抽象类的多个模块都会爆红，提醒去实现 xxx 变量

在下面的全局模式里说了，应用全局模块，后期须要布局好字段，不然我的项目进行到中期的时候，想增加字段，多个模块的 State 会呈现大范畴爆红，提醒去实现你增加的字段；我的项目开始布局好所有的字段，显然这须要全面的思考好大部分场景，然而人的灵感总是有限的，不改代码是不可能，这辈子都不可能。只能想方法看能不能增加一次字段后，前期增加字段，并不会引起其余模块爆红，试了屡次，胜利的应用两头实体，来解决该问题

这里优化俩个方面

应用通用的全局实体
- 这样前期增加字段，就不会影响其余模块，这样咱们就能一个个模块的去整改，不会呈现整个我的项目不能运行的状况
将路由模块和全局模块封装
- 路由模块前期页面多了，代码会很多，放在主入口，真的不好治理；全局模块同理

因为应用两头实体，有一些中央会呈现空指针问题，我都在流程外面写分明了，大家能够把优化流程残缺看一遍哈，都配置好，前面拓展应用就不会报空指针了

main：大改
- 从上面代码能够看到，这里将路由模块和全局模块独自提出来了，这中央为了不便观看，就写在一个文件里；阐明下，RouteConfig 和 StoreConfig 这俩个类，能够放在俩个不同的文件里，这样治理路由和全局字段更新就会很不便了！
- RouteConfig：这里将页面标识和页面映射离开写，这样咱们跳转页面的时候，就能够间接援用 RouteConfig 外面的页面标识
- StoreConfig：全局模块里最重要的就是状态的判断，正文写的很分明了，能够看看正文哈

void main() {runApp(createApp());
}

Widget createApp() {
  return MaterialApp(
    title: 'FishRedux',
    home: RouteConfig.routes.buildPage(RouteConfig.guidePage, null), // 作为默认页面
    onGenerateRoute: (RouteSettings settings) {
      //ios 页面切换格调
      return CupertinoPageRoute(builder: (BuildContext context) {return RouteConfig.routes.buildPage(settings.name, settings.arguments);
      });
    },
  );
}

/// 路由治理
class RouteConfig {
  /// 定义你的路由名称比方   static final String routeHome = 'page/home';
  /// 导航页面
  static const String guidePage = 'page/guide';

  /// 计数器页面
  static const String countPage = 'page/count';

  /// 页面传值跳转模块演示
  static const String firstPage = 'page/first';
  static const String secondPage = 'page/second';

  /// 列表模块演示
  static const String listPage = 'page/list';
  static const String listEditPage = 'page/listEdit';

  static final AbstractRoutes routes = PageRoutes(
    pages: <String, Page<Object, dynamic>>{/// 将你的路由名称和页面映射在一起，比方：RouteConfig.homePage : HomePage(),
      RouteConfig.guidePage: GuidePage(),
      RouteConfig.countPage: CountPage(),
      RouteConfig.firstPage: FirstPage(),
      RouteConfig.secondPage: SecondPage(),
      RouteConfig.listPage: ListPage(),
      RouteConfig.listEditPage: ListEditPage(),},
    visitor: StoreConfig.visitor,
  );
}

/// 全局模式
class StoreConfig {
  /// 全局状态治理
  static _updateState() {return (Object pageState, GlobalState appState) {
      final GlobalBaseState p = pageState;

      if (pageState is Cloneable) {final Object copy = pageState.clone();
        final GlobalBaseState newState = copy;

        if (p.store == null) {
          /// 这中央的判断是必须的，判断第一次 store 对象是否为空
          newState.store = appState.store;
        } else {
          /// 这中央减少字段判断，是否须要更新
          if ((p.store.themeColor != appState.store.themeColor)) {newState.store.themeColor = appState.store.themeColor;}

          /// 如果减少字段，同理下面的判断而后赋值...

        }

        /// 返回新的 state 并将数据设置到 ui
        return newState;
      }
      return pageState;
    };
  }

  static visitor(String path, Page<Object, dynamic> page) {if (page.isTypeof<GlobalBaseState>()) {
      /// 建设 AppStore 驱动 PageStore 的单向数据连贯
      /// 参数 1 AppStore  参数 2 当 AppStore.state 变动时,PageStore.state 该如何变动
      page.connectExtraStore<GlobalState>(GlobalStore.store, _updateState());
    }
  }
}

上面俩个模块是须要改变代码的模块

state
- 这里应用了 StoreModel 两头实体，留神，这中央实体字段 store，初始化是必须的，不然在子模块援用该实体下的字段会报空指针

abstract class GlobalBaseState{StoreModel store;}

class GlobalState implements GlobalBaseState, Cloneable<GlobalState>{

  @override
  GlobalState clone() {return GlobalState();
  }

  @override
  StoreModel store = StoreModel(
    /// store 这个变量, 在这必须示例化, 不然援用该变量中的字段, 会报空指针
    /// 上面的字段, 赋初值, 就是初始时展现的全局状态
    /// 这中央初值, 理当从缓存或数据库中取, 表明用户抉择的全局状态
    themeColor: Colors.lightBlue
  );
}

/// 两头全局实体
/// 须要减少字段就在这个实体外面增加就行了
class StoreModel {
  Color themeColor;

  StoreModel({this.themeColor});
}

reducer
- 这中央改变十分小，将 state.themeColor 改成 state.store.themeColor

Reducer<GlobalState> buildReducer(){
  return asReducer(
    <Object, Reducer<GlobalState>>{GlobalAction.changeThemeColor: _onChangeThemeColor,},
  );
}

List<Color> _colors = <Color>[
  Colors.green,
  Colors.red,
  Colors.black,
  Colors.blue
];

GlobalState _onChangeThemeColor(GlobalState state, Action action) {
  final Color next =
  _colors[((_colors.indexOf(state.store.themeColor) + 1) % _colors.length)];
  return state.clone()..store.themeColor = next;}

上面俩个模块代码没有改变，然而为了思路残缺，同样贴出来

action

enum GlobalAction {changeThemeColor}

class GlobalActionCreator{static Action onChangeThemeColor(){return const Action(GlobalAction.changeThemeColor);
  }
}

store

class GlobalStore{
  static Store<GlobalState> _globalStore;
  static Store<GlobalState> get store => _globalStore ??= createStore<GlobalState>(GlobalState(), buildReducer());
}

这里就用计数器模块的来举例，因为仅仅只须要改变大量代码，且只波及 state 和 view，所以其它模块代码也不反复贴出了
state
- 因为是用两头实体，所以在 clone 办法外面必须将实现的 store 字段加上，不然会报空指针

class CountState implements Cloneable<CountState>, GlobalBaseState {
  int count;

  @override
  CountState clone() {return CountState()
      ..count = count
      ..store = store;
  }

  @override
  StoreModel store;
}

CountState initState(Map<String, dynamic> args) {return CountState()..count = 0;
}

view
- 这外面仅仅改变了一行，在 AppBar 外面加了 backgroundColor，而后应用 state 外面的全局主题色

Widget buildView(CountState state, Dispatch dispatch, ViewService viewService) {return _bodyWidget(state, dispatch);
}

Widget _bodyWidget(CountState state, Dispatch dispatch) {
  return Scaffold(
    appBar: AppBar(title: Text("FishRedux"),
      /// 全局主题，仅仅在此处改变了一行
      backgroundColor: state.store.themeColor,
    ),
    /// 上面其余代码省略....
}

如果其余模块也须要做主题色，也依照此处逻辑改变即可

调用和下面说的一样，用下述全局形式在适合的中央调用

GlobalStore.store.dispatch(GlobalActionCreator.onChangeThemeColor());

通过下面的优化，应用体验晋升不是一个级别，大大晋升的全局模式的扩展性，咱们就算前期减少了大量的全局字段，也能够一个个模块缓缓改，不必一次爆肝全改完，猝死的概率又大大减少了！

Component 是个比拟罕用的模块，下面应用列表的时候，就应用到了 Component，这次咱们来看看，在页面中间接应用 Component，可插拔式应用！Component 的应用总的来说是比较简单了，比拟要害的是在 State 中建设起连贯。

上图的成果是在页面中嵌入了俩个 Component，扭转子 Component 的操作是在页面中实现的
先看下页面构造

这中央写了一个 Component，代码很简略，来看看吧

component

这中央代码是主动生成了，没有任何改变，就不贴了

state
- initState()：咱们须要留神，Component 中的 initState() 办法在外部没有调用，尽管主动生成的代码有这个办法，然而无奈起到初始化作用，能够删掉该办法

class AreaState implements Cloneable<AreaState> {
  String title;
  String text;
  Color color;

  AreaState({
    this.title = "",
    this.color = Colors.blue,
    this.text = "",
  });

  @override
  AreaState clone() {return AreaState()
      ..color = color
      ..text = text
      ..title = title;
  }
}

view

Widget buildView(AreaState state, Dispatch dispatch, ViewService viewService) {
  return Scaffold(
    appBar: AppBar(title: Text(state.title),
      automaticallyImplyLeading: false,
    ),
    body: Container(
      height: double.infinity,
      width: double.infinity,
      alignment: Alignment.center,
      color: state.color,
      child: Text(state.text),
    ),
  );
}

CompPage 中，没用到 effete 这层，就没创立该文件，老规矩，先看看 state

state
- 这中央是十分重要的中央，XxxxConnecto 的实现模式是看官网代码写的
- computed()：该办法是必须实现的，这个相似间接的 get() 办法，然而切记不能像 get() 间接返回 state.leftAreaState() 或 state.rightAreaState，某些场景初始化无奈刷新，因为是同一个对象，会被判断未更改，所以会不刷新控件
  - 留神了留神了，这边做了优化，间接返回 clone 办法，这是对官网赋值写法的一个优化，也能够防止下面说的问题，大家能够思考思考
- set()：该办法是 Component 数据流回推到页面的 state，放弃俩者 state 数据统一；如果 Component 模块更新了本人的 State，不写这个办法会报错的

class CompState implements Cloneable<CompState> {
  AreaState leftAreaState;
  AreaState rightAreaState;

  @override
  CompState clone() {return CompState()
      ..rightAreaState = rightAreaState
      ..leftAreaState = leftAreaState;
  }
}

CompState initState(Map<String, dynamic> args) {
  /// 初始化数据
  return CompState()
    ..rightAreaState = AreaState(
      title: "LeftAreaComponent",
      text: "LeftAreaComponent",
      color: Colors.indigoAccent,
    )
    ..leftAreaState = AreaState(
      title: "RightAreaComponent",
      text: "RightAreaComponent",
      color: Colors.blue,
    );
}

/// 右边 Component 连接器
class LeftAreaConnector extends ConnOp<CompState, AreaState>
    with ReselectMixin<CompState, AreaState> {
  @override
  AreaState computed(CompState state) {return state.leftAreaState.clone();
  }

  @override
  void set(CompState state, AreaState subState) {state.leftAreaState = subState;}
}

/// 左边 Component 连接器
class RightAreaConnector extends ConnOp<CompState, AreaState>
    with ReselectMixin<CompState, AreaState> {
  @override
  AreaState computed(CompState state) {return state.rightAreaState.clone();
  }

  @override
  void set(CompState state, AreaState subState) {state.rightAreaState = subState;}
}

page
- 写完连接器后，咱们在 Page 外面绑定下，就能应用 Component 了

class CompPage extends Page<CompState, Map<String, dynamic>> {CompPage()
      : super(
          initState: initState,
          reducer: buildReducer(),
          view: buildView,
          dependencies: Dependencies<CompState>(
              adapter: null,
              slots: <String, Dependent<CompState>>{
                // 绑定 Component
                "leftArea": LeftAreaConnector() + AreaComponent(),
                "rightArea": RightAreaConnector() + AreaComponent(),
              }),
          middleware: <Middleware<CompState>>[],);
}

view
- 应用 Component 就非常简单了：viewService.buildComponent(“xxxxxx”)

Widget buildView(CompState state, Dispatch dispatch, ViewService viewService) {
  return Container(
    color: Colors.white,
    child: Column(
      children: [
        ///Component 组件局部
        Expanded(
          flex: 3,
          child: Row(
            children: [Expanded(child: viewService.buildComponent("leftArea")),
              Expanded(child: viewService.buildComponent("rightArea")),
            ],
          ),
        ),

        /// 按钮
        Expanded(
            flex: 1,
            child: Center(
              child: RawMaterialButton(
                fillColor: Colors.blue,
                shape: StadiumBorder(),
                onPressed: () => dispatch(CompActionCreator.change()),
                child: Text("扭转"),
              ),
            ))
      ],
    ),
  );
}

action

enum CompAction {change}

class CompActionCreator {static Action change() {return const Action(CompAction.change);
  }
}

reducer

Reducer<CompState> buildReducer() {
  return asReducer(
    <Object, Reducer<CompState>>{CompAction.change: _change,},
  );
}

CompState _change(CompState state, Action action) {final CompState newState = state.clone();
  // 扭转 leftAreaComponent 中 state
  newState.leftAreaState.text = "LeftAreaState：${Random().nextInt(1000)}";
  newState.leftAreaState.color =
      Color.fromRGBO(randomColor(), randomColor(), randomColor(), 1);

  // 扭转 rightAreaComponent 中 state
  newState.rightAreaState.text = "RightAreaState：${Random().nextInt(1000)}";
  newState.rightAreaState.color =
      Color.fromRGBO(randomColor(), randomColor(), randomColor(), 1);

  return newState;
}

int randomColor() {return Random().nextInt(255);
}

总的来说，Component 的应用还是比较简单的；如果咱们把某个简单的列表提炼出一个 Component 的，很显著有个初始化的过程，这里咱们须要将：申请参数调体或列表详情操作，在 page 页面解决好，而后再更新给咱们绑定的子 Component 的 State，这样就能起到初始化某个模块的作用；至于刷新，下拉等后续操作，就让 Component 外部本人去解决了

fish_redux 中是带有播送的通信形式，应用的形式很简略，这本是 effect 层，ctx 参数自带的一个 api，这里简略介绍一下

action
- 播送事件独自写了一个 action 文件，便于对立治理

enum BroadcastAction {toNotify}

class BroadcastActionCreator {
  /// 播送告诉
  static Action toNotify(String msg) {return Action(BroadcastAction.toNotify, payload: msg);
  }
}

发送播送
- 这是页面跳转的办法，就在此处写了，如果想看具体代码的话，能够去 demo 地址外面看下

void _backFirst(Action action, Context<SecondState> ctx) {
  // 播送通信
  ctx.broadcast(BroadcastActionCreator.toNotify("页面二发送播送告诉"));
}

承受播送

Effect<FirstState> buildEffect() {
  return combineEffects(<Object, Effect<FirstState>>{
    // 承受发送的播送音讯
    BroadcastAction.toNotify: _receiveNotify,
  });
}
void _receiveNotify(Action action, Context<FirstState> ctx) async {
  /// 承受播送
  print("跳转一页面:${action.payload}");
}

播送的应用还是挺简略的，根本和 dispatch 的应用是统一的，dispatch 是模块的，而 broadcast 是有页面栈，就能告诉其余页面，很多状况下，咱们在一个页面进行了操作，其余页面也须要同步做一些解决，应用播送就很简略了

留神： 播送发送和承受是一对多的关系，一处发送，能够在多处承受；和 dispatch 发送事件，如果在 effect 外面承受，在 reducer 就无奈承受的状况是不一样的（被拦挡了）

有限弱化了 reducer 层作用

在日常应用 fish_redux 和 flutter_bloc 后，理论能粗浅领会 reducer 层实际上只是相当于 bloc 中 yield
或 emit 关键字的作用，职能齐全能够弱化为，仅仅作为状态刷新；这样能够大大简化开发流程，只须要关注
view -> action -> effect (reducer：应用对立的刷新事件)
上面范例代码，解决数据的操作间接在 effect 层解决，如须要更改数据，间接对 ctx.state 进行操作，波及刷新页面的操作，对立调用 onRefresh 事件；对于一个页面有几十个表单的状况，这种操作，能大大晋升你的开发速度和体验，亲自体验，大家能够尝试下

Reducer<TestState> buildReducer() {
  return asReducer(
    <Object, Reducer<TestState>>{TestAction.onRefresh: _onRefresh,},
  );
}

TestState _onRefresh(TreeState state, Action action) {return state.clone();
}

具体能够查看玩 android 我的项目代码；花了一些工夫，把玩 android 我的项目代码所有模块全副重构了，肝痛

阐明

这种开发模式，能够说是个常规，在 android 外面是封装一个个 View，View 里有对应的一套，逻辑自洽的性能，而后在主 xm 外面组合这些 View；这种思维齐全能够引申到 Flutter 里，而且，开发体验更上几百层楼，让你的 widget 组合能够更加灵便百变，百变星君

view 模块中，页面应用 widget 组合的形式去结构的，只传入必要的数据源和保留一些点击回调
为什么用 widget 组合形式结构页面？
- 非常复杂的界面，必须将页面分成一个个小模块，而后再将其组合，每个小模块 Widget 外部该当对本身的的职能，能逻辑自洽的去解决；这种组合的形式出现的代码，会十分的层次分明，不会让你的代码写着写着，忽然就变成 shit
组合 widget 关键点
- 一般来说，咱们并不关注 widget 外部页面的实现，只须要关怀的是 widget 须要的数据源，以及 widget 对交互的反馈；例如：我点击 widget 后，widget 回调事件，并传播一些数据给我；至于外部怎么实现，内部并不关怀，请勿将 dispatch 传递到封装的 widget 外部，这会使咱们关注的事件被封装在外部
具体请查看玩 android 我的项目代码

这片文章，说实话，花了不少精力去写的，也花了不少工夫构思；次要是例子，必须要本人重写下，重复思考例子是否正当等等，头皮微凉。
代码地址：代码 demo 地址
fish_redux 版 - 玩 Android：fish_redux 版 - 玩 android
大家如果感觉有播种，就给我点个赞吧！你的点赞，是我码字的最大能源！

前言

几个问题点

筹备

引入

开发插件

创立

开发流程

redux 流程

fish_redux 流程

范例阐明

计数器

效果图

规范模式

优化

搞定

页面跳转

效果图

实现

FirstPage

SecondPage

搞定

列表文章

列表展现 - 网络申请

效果图

筹备

流程

初始化列表模块

item 模块

列表模块逻辑欠缺

列表批改 - 单 item 刷新

效果图

构造

列表模块

item 模块

多样式列表

列表存在的问题 + 解决方案

列表多 item 刷新问题

搞定

全局模式

效果图

开搞

store 模块

main 改变

子模块应用

调用

搞定

全局模块优化

反思

优化

入口模块

Store 模块

子模块应用

调用

体验

Component 应用

效果图

Component

Page

总结下

播送

应用

阐明

开发小技巧

弱化 reducer

widget 组合式开发

最初

站内搜索