flutter_redux的入门级使用

title: flutter_redux
date: 2019-11-03 20:48:18
tags:
- flutter

flutter_redux的入门级使用

反正安装最新依赖就OK了

dependencies:
  flutter_redux: ^0.5.3

Redux

注意：你也可以把这些state actions reducer 切割开，它和react-redux一样的

//reducer 核心代码
// int state = 0;
// 开始这里是一个数字
// 如果他是一个对象怎么样
// 单向闭环

//count 状态
class CountState {
  int _count = 0;
  get count => _count;

  String _username = '';
  get username => _username ;

  //状态初始化
  CountState.initState() {
    this._count = 0;
    this._username = '';
  }
  //state构造函数
  CountState(this._count,this._username);
}

//枚举actions
enum AllActions { Increment, SetUserName }

//reducer
CountState counterReducer(CountState state, dynamic action) {
  // reducer 是一个纯函数

  //store.dispatch() 传入了一个数组
  // 第一个参数是actionstype
  var actionsType = action[0];
  //第二个参数是要更改的新数据
  var actionArgments = action[1];
  //分支选择
  switch (actionsType) {
    case AllActions.Increment:
      //修改状态返回新的状态去覆盖原来的状态
      state._count += 100;
      state._username = actionArgments;
      return state;
  }
  return state;
}

Widget代码部分

floatingActionButton: new StoreConnector<CountState, VoidCallback>(
  //converter转换器 在转换器里面调用actions
  converter: (store) {
    return () => store.dispatch([AllActions.Increment,'张三']);
    //传值和通知reducer
  },
  //构造按钮
  builder: (context, callback) {
    return new FloatingActionButton(
      onPressed: callback,
      //这里的callback就是上面的转换器
      ///你也可以这样写
      ///onPressed:(){
      /// callback();
      /// //TODO
      ///}
      tooltip: 'Increment',
      child: new Icon(Icons.add),
    );
  },
),

读取store里面状态

StoreConnector<CountState, String>(
  converter: (store) => store.state.count.toString(),
  builder: (context, count) {
    //设置count
    return Text(count);
  },
),
StoreConnector<CountState, String>(
  converter: (store) => store.state.username.toString(),
  builder: (context, username) {
    //设置username
    return Text(username);
  },
),

你需要在main函数里面传递Store

void main () {
final store = new Store<CountState>(counterReducer, initialState: CountState.initState());

  runApp(new MyApp(
    title: 'Flutter Redux Demo',
    store: store,
  ));
}

写在最后面哈，我老觉得store.dispatch()传值不应该那样传，如果你有更好的方案，请留言。