美文网首页Flutter学习笔记
Flutter状态管理之redux

Flutter状态管理之redux

作者: 王俏 | 来源:发表于2019-10-10 10:49 被阅读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()
                          );
                        },
                      )
                    ],
                  )
                ],
              ),
            ),
          )
        );
      }
    }
    

    相关文章

      网友评论

        本文标题:Flutter状态管理之redux

        本文链接:https://www.haomeiwen.com/subject/mpfjyctx.html