引入fish_redux插件,想用最新版插件,可进入pub地址里面查看
dependencies:
fish_redux: ^0.3.4
此处我们需要安装代码生成插件,可以帮我们生成大量文件和模板代码
在Android Studio里面搜索”fish“就能搜出插件了,插件名叫:FishReduxTemplate
这里我在新建的count文件夹上,选择新建文件,选择:New —> FishReduxTemplate
此处选择:Page,底下的“Select Fils”全部选择,这是标准的redux文件结构
创建好后文件结构
至此准备工作已做完
在写代码前,先看写下流程图
可以发现,事件的传递,都是通过dispatch这个方法,而且action这层很明显是非常关键的一层,事件的传递,都是在该层定义和中转的
fish_redux正常情况下的流转过程 fish_redux各模块怎么传递数据
view —> action —> effect —> reducer(更新数据)
import 'package:fish_redux/fish_redux.dart';
import 'package:fishredux/count/page.dart';
import 'package:flutter/material.dart' hide Page;
Widget createApp() {
final AbstractRoutes routes = PageRoutes(
pages: <String, Page<Object, dynamic>>{
'count_page': CountPage(), //在这里添加页面
},
);
return MaterialApp(
title: 'FishDemo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: routes.buildPage('count_page', null), //把他作为默认页面
onGenerateRoute: (RouteSettings settings) {
return MaterialPageRoute<Object>(builder: (BuildContext context) {
return routes.buildPage(settings.name, settings.arguments);
});
},
);
}
import 'package:fish_redux/fish_redux.dart';
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里面有三个参数
import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import 'action.dart';
import 'state.dart';
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.countIncrease());
},
child: Icon(Icons.add),
),
);
}
该层是非常重要的模块,页面所有的行为都可以在本层直观的看到
import 'package:fish_redux/fish_redux.dart';
//TODO replace with your own action
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);
}
}
import 'package:fish_redux/fish_redux.dart';
import 'action.dart';
import 'state.dart';
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));
}
import 'package:fish_redux/fish_redux.dart';
import 'action.dart';
import 'state.dart';
Reducer<CountState> buildReducer() {
return asReducer(
<Object, Reducer<CountState>>{
CountAction.updateCount: _updateCount,
},
);
}
CountState _updateCount(CountState state, Action action) {
final CountState newState = state.clone();
newState.count = action.payload;
return newState;
}
点击按钮+1