关于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 流程

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

fish_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);
      });
    },
  );
}

FirstPage

• 先来看看该页面的一个流程

  • 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;
}

SecondPage

• 这个页面比较简单，后续不波及到页面数据更新，所以 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

item 模块

依照流程走

• 依据接口返回 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 刷新

效果图

• 这次来演示列表的单 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 模块了，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 的，只能一次刷新一个 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 之前要做好布局

开搞

store 模块

• 文件构造

  • 这中央须要新建一个文件夹，新建四个文件：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());
}

main 改变

• 这外面将 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());
    }
  }
}

Store 模块

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

• 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，可插拔式应用！Component 的应用总的来说是比较简单了，比拟要害的是在 State 中建设起连贯。

效果图

• 上图的成果是在页面中嵌入了俩个 Component，扭转子 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),
    ),
  );
}

Page

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

有限弱化了 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 我的项目代码所有模块全副重构了，肝痛

widget 组合式开发

阐明

这种开发模式，能够说是个常规，在 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
• 大家如果感觉有播种，就给我点个赞吧！你的点赞，是我码字的最大能源！