初識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生命週期方法），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生命週期，基於mixins的WidgetsBindingObserver宣告週期方法，需要等待後期官方提供開放。