下面是flutter自带demo,大家应该很熟悉了
- 如果对基础概念不明白的可以去我第一篇文章了解一下
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(title: 'Flutter Demo Home Page'),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('$_counter'),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
cunter fish redux 版
- 基础目录
- action.dart
- effect.dart(本例中非必须)
- page.dart
- reducer.dart
- state.dart
- view.dart
action.dart
enum CounterAction { add, onAdd }
class CounterActionCreator {
//reducer使用
static Action add() {
return const Action(CounterAction.add);
}
//effect使用
static Action onAdd() {
return const Action(CounterAction.onAdd);
}
}
state.dart
class CounterState implements Cloneable<CounterState> {
int count = 0;
@override
CounterState clone() {
return CounterState()..count = count;
}
}
CounterState initState(Map<String, dynamic> args){
//什么也没做,只是初始化数据
return CounterState();
}
reducer.dart
Reducer<CounterState> buildReducer() {
return asReducer<CounterState>(<Object, Reducer<CounterState>>{
CounterAction.add: _add,
});
}
CounterState _add(CounterState state, Action action) {
final CounterState newState = state.clone();
newState.count = ++state.count;
return newState;
}
effect.dart
Effect<CounterState> buildEffect() {
return combineEffects(<Object, Effect<CounterState>>{
CounterAction.onAdd: _onAdd,
});
}
void _onAdd(Action action, Context<CounterState> ctx) {
print("_onAdd");
ctx.dispatch(CounterActionCreator.add());
}
view.dart
Widget buildView(
CounterState state, Dispatch dispatch, ViewService viewService) {
return Scaffold(
appBar: AppBar(
title: Text('CounterFishRedux'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
state.count.toString(),
)
],
),
),
floatingActionButton: FloatingActionButton(
//发送的action到了Effect中处理
onPressed: () => dispatch(CounterActionCreator.onAdd()),
//也可以发action到reducer中处理
//onPressed: () => dispatch(CounterActionCreator.add()),
tooltip: 'add',
child: Icon(Icons.add),
),
);
}
page.dart
class CounterFishReduxPage extends Page<CounterState, Map<String, dynamic>> {
CounterFishReduxPage()
: super(
initState: initState,
effect: buildEffect(),
reducer: buildReducer(),
view: buildView,
);
}
在view.dart中,用户触发FloatingActionButton的onPress事件,dispatch了名为onAdd的Action,在effect.dart中接收到action,会继续dispatch,到reducer.dart中(这一步非必须,可以直接dispatch到reducer.dart中),在reducer.dart中,在state中取出state中的数据,处理(加一)后,返回state,数据更新到store中,触发UI更新,最终到view.dart中state中的数据会更新,取出新的数据显示。
fish redux适用于中大型项目,这种简单的功能直接用官方的setState即可。
这样就可以单独作为一个page或者component使用,没有逻辑和UI的耦合
demo地址:
另外推荐一个文章:https://blog.csdn.net/Crazy_SunShine/article/details/101430068
demo地址:https://github.com/xuyanhao666/Fish_Redux_Demo/tree/master/fish_redux_addCount