Flutter状态管理之redux
2019-10-10 本文已影响0人
王俏
import 'package:redux/redux.dart';
// 全局 state
class AppState {
List<AVList> data;
AppState(this.data);
}
// 具体使用的对象
class AVList {
final String name;
final IconData icon;
AVList(this.name, this.icon);
AVList.fromJSON(Map<String, dynamic> json)
:name = json['name'],
icon = json['icon'];
}
// Action
List<AVList> addItem(List<AVList> avLists, action){
avLists.add(action.avLists[0]);
return avLists;
}
List<AVList> removeItem(List<AVList> avLists, action){
avLists.removeLast();
return avLists;
}
//使用 combineReducers 来注册你的 Action
final ListReducer = combineReducers<List<AVList>>([
TypedReducer<List<AVList>, AddAVListAction>(addItem),
TypedReducer<List<AVList>, RemoveAVListAction>(removeItem)
]);
class AddAVListAction {
final List<AVList> avLists;
AddAVListAction(this.avLists);
}
class RemoveAVListAction {}
AppState appReducer(AppState state, action) {
return new AppState(
ListReducer(state.data, action)
);
}
class AVReduxList extends StatelessWidget {
final store = new Store<AppState>(
appReducer,
initialState: new AppState([new AVList("android", Icons.android)])
);
AVReduxList({
Key key,
this.store
}): super(key:key);
@override
Widget build(BuildContext context) {
return new StoreProvider<AppState>(
store: store,
child: new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('AVReduxList'),
),
body: new Column(
children: <Widget>[
new StoreConnector<AppState, List<AVList>>(
converter: (store) => store.state.data,
builder: (BuildContext context, data){
return new Container(
height: 500.0,
child: ListView.builder(
itemCount: data.length,
itemBuilder: (BuildContext context, int position){
return new Padding(
padding: EdgeInsets.all(10.0),
child: new Row(
children: <Widget>[
new Text(data[position].name),
new Icon(data[position].icon, color: Colors.blue)
],
),
);
},
),
);
},
),
new Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new RaisedButton(
color: Colors.blue,
child: new Text(
'更新',
style: new TextStyle(
color: Colors.white
),
),
onPressed: (){
store.dispatch(new AddAVListAction(
[new AVList("android", Icons.android)]
));
},
),
new RaisedButton(
color: Colors.blue,
child: new Text(
'删除最后一项',
style: new TextStyle(
color: Colors.white
),
),
onPressed: (){
store.dispatch(
new RemoveAVListAction()
);
},
)
],
)
],
),
),
)
);
}
}