Flutter学习笔记

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()
                      );
                    },
                  )
                ],
              )
            ],
          ),
        ),
      )
    );
  }
}
上一篇下一篇

猜你喜欢

热点阅读