初识Fish Redux在Flutter中使用

本教程需要你在官方教程的基础上有概念性的了解,若你对基础概念不了解，请先阅读官方介绍问文档orGithub上的介绍。

Fluter应用框架Fish Redux官方介绍

 Fish Redux Github地址

开发工具：

Android Studio
FishReduxTemplate(AS中插件，方便快速搭建Fish Redux)

基础概念回顾：

官方推荐目录样式

sample_page
-- action.dart
-- page.dart
-- view.dart
-- effect.dart
-- reducer.dart
-- state.dart
components
sample_component
-- action.dart
-- component.dart
-- view.dart
-- effect.dart
-- reducer.dart
-- state.dart

关于Action

Action我把它理解为事件类型声明的声明,先是枚举定义Action type，在对应Action Creator中定义事件方法，方便dispatch调用对应Action事件。

构造方法 const Action(this.type, {this.payload}) {type 为枚举类型的Action，payload为传递dynamic类型数据}

//定义 Action Type
enum ItemAction { jumpDetail }
//ActionCreator定义方法
class ItemActionCreator {
  static Action onJumpDetail() {
    return const Action(ItemAction.jumpDetail);
  }
}

关于View

View顾名思义就是界面Widget展示，其
函数签名：(T,Dispatch,ViewServices) => Widget 【T为对应state.dart定义的数据，Dispatch可以调用ActionCreator中方法，ViewService可以调用创建Adapter或是Component】

Widget buildView(ItemState state, Dispatch dispatch, ViewService viewService) {
  return Column(
    children: <Widget>[
      Container(
        padding: const EdgeInsets.all(10),
        child: GestureDetector(
          child:  Row(......),
          onTap: ()=> dispatch(ItemActionCreator.onJumpDetail()),
        ),

      ),
    ],
  );
}

关于Effect和Reducer

Effect和Reducer都属于对Action事件操作行为，这两者区别在于：Effect是对非数据操作行为（包括State<StatefulWidget>生命周期方法），Reducer是对数据操作行为，简单理解为只要Reducer操作过原来数据就改变了。

Effect的函数签名：(Context,Action) => Object

Reducer的函数签名：(T,Action) => T

///Effect 常用于定义 网络数据请求，或是界面点击事件等非数据操作
Effect<ItemState> buildEffect() {
  return combineEffects(<Object, Effect<ItemState>>{
    ItemAction.jumpDetail: _onJumpDetail,
  });
}
void _onJumpDetail(Action action, Context<ItemState> ctx) {
  Navigator.push(ctx.context, MaterialPageRoute(builder: (buildContext) {
    return DetailPage().buildPage({'item': ctx.state});
  }));
}

//Reducer常用语操作数据行为，通过拿到Action payload中数据来对数据通过浅复制方式改变数据
Reducer<DetailState> buildReducer() {
  return asReducer(
    <Object, Reducer<DetailState>>{
      DetailAction.loadDone: _onLoadDone,
      ......
    },
  );
}

DetailState _onLoadDone(DetailState state, Action action) {
  final List<String> list = action.payload ?? <String>[];
  final DetailState newState = state.clone();
  newState.list = list;
  return newState;
}

关于State

State为定义Dart本地数据封装类，其要实现Cloneable接口，当中数据改变通过浅复制方式，默认插件会实现initState方法

///下文Demo首页列表数据
class ItemState implements Cloneable<ItemState> {
  String title;
  String subTitle;

  ItemState({this.title, this.subTitle});

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

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

关于Component

Component和Page类似都是对局部的展示和功能的封装。

三要素:

View(组件展示),Effect（非修改数据行为）,Reducer（修改数据行为）

component使用通常用viewService.buildComponent('component name')

class ItemComponent extends Component<ItemState> {
  ItemComponent()
      : super(
            effect: buildEffect(),
            reducer: buildReducer(),
            view: buildView,
            dependencies: Dependencies<ItemState>(
                adapter: null,
                slots: <String, Dependent<ItemState>>{
                }),);
}

///需要Page界面注册 Component
 dependencies: Dependencies<HomeState>(
              adapter: ItemAdapter(),
              slots: <String, Dependent<HomeState>>{
                'header': HeaderConnector() + HeaderComponent(),
              }),

关于Connector

connector理解为子数据与父数据绑定，在注册component以及adapter使用

两种方式实现方式：

实现 Reselect1 抽象类，主要用于对原有数据数据改造使用，比如原有数据列表数据有几条等

///Demo 中需要统计 列表数据条数 讲列表数与定义Component定义的state数据绑定在一起
class HeaderConnector extends Reselect1<HomeState, HeaderState, int> {
  @override
  HeaderState computed(int state) {
    return HeaderState()..total = state;
  }

  @override
  int getSub0(HomeState state) {
    return state.list.length;
  }

  @override
  void set(HomeState state, HeaderState subState) {}
}

实现ConnOp类，用于Adapter数据绑定

///主要用于列表数据改变成ItemBean，提供set，get方法
class _ItemConnector extends ConnOp<HomeState, List<ItemBean>> {
  @override
  List<ItemBean> get(HomeState state) {
    if (state.list.isNotEmpty) {
      return state.list
          .map((itemState) => ItemBean('item', itemState))
          .toList();
    } else {
      return <ItemBean>[];
    }
  }

  @override
  void set(HomeState state, List<ItemBean> items) {
    if (items.isNotEmpty) {
      state.list = List<ItemState>.from(
          items.map((ItemBean bean) => bean.data).toList());
    } else {
      state.list = <ItemState>[];
    }
  }

  @override
  subReducer(reducer) {
    // TODO: implement subReducer
    return super.subReducer(reducer);
  }
}

Demo源码地址

使用场景

Fish Redux可以实现数据集中化处理，分治解耦，带来这些便利同时，也会带来一定繁琐行和易错性，所以对于一些界面逻辑简单，或是只是列表展示不建议使用Fish Redux框架模式开发。

目前Fish Redux生命周期管理只限于State<StatefulWidget>生命周期，基于mixins的WidgetsBindingObserver声明周期方法，需要等待后期官方提供开放。

初识Fish Redux在Flutter中使用

初识Fish Redux在Flutter中使用