Fish Redux 全局Store-AppRoute使用指南

在学习怎么使用AppRoute前，先了解下这几个问题，确定这是否是你需要的

为什么Redux.js和Vuex是全局Store？

前端的单页面应用越来越复杂，一个model变化会引起另外一个model变化，又可能引起视图变化。Redux的三大原则，使state的变化可预测成为可能。其中第一条就是单一数据源，这体现了集中思想。应用维护一颗状态树，而数据变化驱动视图重新刷新。单一的状态树更方便数据的管理，由于生命周期和App一致，组件间数据也更方便传递分享（如登录信息）。
为什么Fish Redux不是这样的？

Fish Redux一开始只支持Page级别Stroe是业务的客观诉求。Flutter作为一个新技术栈要用在一个上亿用户的闲鱼App中，需要风险控制和隔离，只能先改写一些页面，验证改进迭代再逐步替换。
我是否需要使用AppRoute？

如果你的诉求和闲鱼一样，那选择的是高难度路线，需要在集中和分治间做长久斗争。建议使用HybridRoute能省点时间，也方便后续改造。不然，那就用AppRoute吧，充分享受Flutter和Redux带来的优越性。

设计思想

作者添加了Route这一层，它的核心作用是产生一个Page，对应不同场景，实现了三个具体的XXXRoute

/// Route 抽象类，只提供返回一个page的能力
abstract class AbstractRoutes {
  Widget buildPage(String path, dynamic arguments);
}

/// AppRoutes实现多page公用一个store，适合全新App使用
class AppRoutes<T> implements AbstractRoutes {
  final Map<String, Dependent<T>> pages;
  final PageStore<T> _store;
    ...
}

/// 一个page，一个store，适合部分页面改写flutter的App使用，如现在的闲鱼 
class PageRoutes implements AbstractRoutes {
  final Map<String, Page<Object, dynamic>> pages;
    ...
}

/// 混合Routes，可以同时使用AppRoutes和PageRoutes，适合都要的App，如未来一段时间的闲鱼
class HybridRoutes implements AbstractRoutes {
  final List<AbstractRoutes> routes;
    ...
}

使用方式

定义一个AppRoute

/// app_route.dart
/// 因为是全局的，这里用单例，也比较方便调用
class AppRoute {
  static AbstractRoutes _global;
  static AbstractRoutes get global {
    if (_global == null) {
      _global = AppRoutes(preloadedState: AppState.initialState(), pages: {
        // 这里有两种写法，效果是一样的，带操作符的写法比较生动，也简短些。
        // RoutePath.todoList: TodoListPage().asDependent(TodoListConn()),
        RoutePath.todoList: TodoListConn() + TodoListPage(),
        RoutePath.todoDetail: TodoDetailConn() + TodoDetailPage(),
      });
    }
    return _global;
  }
}

/// 减少魔法字段，这些常量放在constant里也可以，放在这里只是方便。
class RoutePath {
  static const String todoList = 'todo_list';
  static const String todoDetail = 'todo_detail';
}

定义一个AppState，用来作为状态树的根节点

/// screens/todo_list/state.dart
class AppState implements Cloneable<AppState> {
  TodoListState todoListState;
  TodoDetailState todoDetailState;

  AppState(this.todoListState, this.todoDetailState);

  @override
  AppState clone() {
    return AppState(todoListState, todoDetailState);
  }

  AppState.initialState()
      : todoListState = initState(null),
        todoDetailState = TodoDetailState();
}

定义Connect，描述subState和父State之间的转化关系

/// screens/todo_list/state.dart
/// get定义从大state取小state，set定义小state怎么改变大state
class TodoListConn extends ConnOp<AppState, TodoListState> {
  @override
  TodoListState get(AppState state) => state.todoListState;
  
  @override
  void set(AppState state, TodoListState subState) =>
      state.todoListState = subState;
}

替换原来Page产生的方式

/// main.dart
home: AppRoute.global.buildPage(RoutePath.todoList, null),

额外处理（有数据跳转的Page）

/// screens/todo_detail/reducer.dart
/// 页面跳转可能会有数据传递，比如list到detail页面，需要传递id,
/// 这是很常见的，那数据什么时候传递？自然是page生成的时候，可以看到[AbstractRoutes]
/// 的buildPage接受一个arguments参数，dynamic你可以传任意结构数据，推荐传Map，原生json样式
/// 如果arguments不为null，Route会帮我们发一个route的Action，
/// 所以我们需要在对应的Reducer里处理一下
Reducer<TodoDetailState> buildReducer() {
  return asReducer<TodoDetailState>(<Object, Reducer<TodoDetailState>>{
    RouteAction.route: _route,
      ...
  });
}

/// 接到route Action，更新下state的id
TodoDetailState _route(TodoDetailState state, Action action) {
  final TodoDetailState newState = state.clone();
  newState.id = action.payload['id'];
  return newState;
}

对比体验Flutter Redux

一直以来Fish Redux和Flutter Redux的最佳实践并不同，一个是Page级别的状态管理，一个是App级别状态管理，所以算是错位竞品。在Fish Redux加入Route后，它也算完全体了，这两个都用过后我简单对比下：

方便度

Flutter Redux调用简单，想要深入理解API含义，会难一些。Fish Redux概念多，感觉是把二维数组flat了，大堆的定义和概念，可能会劝退小部份没耐心的同学。然而框架意图是清晰的，而且代码也有精心设计的痕迹。这点对我而言平分秋色。
文档例子

Flutter Redux优胜，文档和例子都比刚开源的Fish Redux多很多，Fish Redux文档不多但都有中文版哦
问题响应

Fish Redux优胜，Github上Issue基本能在12小时内得到作者或热心网友的回复和解答。而Flutter Redux的作者维护了很多个库，精力有限，所以Issue处理速度可以说是拖拖拉拉了
完备度

功能上都是完备的，形式上Flutter Redux需要依赖两个库，Fish Redux没有任何其他三方依赖会好一点点
性能

其实状态管理的初衷并不会很在意性能，毕竟它只是个状态管理啊，管理都需要额外成本的。但是fish redux确实关注了并对于大列表场景做了比较突出的优化，性能提升刚刚的。

总结：Fish Redux完全可以成为Flutter状态管理的备选方案了，而且它还正以肉眼可见的速度在成长。

后续

对比过后觉得Fish Redux不错，想推销给长官

我：报告老板，ali的Fish Redux老NB了，我们项目要不用这个吧？

老板：哪NB了？

我：巴拉巴拉～

老板：哪些大厂在用了

我：额，貌似就ali

老板：单元测试覆盖多少？

我：快50%吧

老板：性能提升多少，有benchmark吗？

我：。。。

抱歉，以上是我脑补的，但以我老板的专业度，这些问题必问。。。

本文源码地址：https://github.com/hyjfine/flutter_redux_sample/tree/fish-redux-route

（完）

@子路宇, 本文版权属于再惠研发团队，欢迎转载，转载请保留出处。