初识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声明周期方法，需要等待后期官方提供开放。
网友评论