Dart 状态管理之Redux

在正式介绍 Redux 为什么我们需要状态管理。如果你已经对此十分清楚，那么建议直接跳过这一节。
如果我们的应用足够简单，Flutter 作为一个声明式框架，你或许只需要将 数据 映射成 视图 就可以了。你可能并不需要状态管理，就像下面这样。

image
但是随着功能的增加，你的应用程序将会有几十个甚至上百个状态。这个时候你的应用应该会是这样。
image
这又是什么鬼。我们很难再清楚的测试维护我们的状态，因为它看上去实在是太复杂了！而且还会有多个页面共享同一个状态，例如当你进入一个文章点赞，退出到外部缩略展示的时候，外部也需要显示点赞数，这时候就需要同步这两个状态。
Flutter 实际上在一开始就为我们提供了一种状态管理方式，那就是 StatefulWidget。但是我们很快发现，它正是造成上述原因的罪魁祸首。
在 State 属于某一个特定的 Widget，在多个 Widget 之间进行交流的时候，虽然你可以使用 callback 解决，但是当嵌套足够深的话，我们增加非常多可怕的垃圾代码。
这时候，我们便迫切的需要一个架构来帮助我们理清这些关系，状态管理框架应运而生。

添加 redux/flutter_redux

首先在yaml中添加

  redux: ^4.0.0+3
  flutter_redux: ^0.6.0

最新版本版本请参考：pub.flutter-io.cn/flutter_redux / redux

然后运行

flutter pub get

获取到最新的包到本地，在需要的文件夹内导入

import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux/redux.dart';

例子

我们还用点击按钮新增数字的例子

首先需要在需要显示的的部件外部用StoreProvider包裹,比如这样：

 @override
  Widget build(BuildContext context) {
    _build += 'p1 build \n';
    return StoreProvider(
      store: store,
      child: Scaffold(
          appBar: AppBar(
            title: Text('ScopedModel'),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(_build),
                StoreConnector<int, String>(
                  converter: (store) => store.state.toString(),
                  builder: (context, count) {
                    _build += 's1';
                    return Text('$count');
                  },
                ),
                StoreConnector<int, VoidCallback>(
                  converter: (store) {
                    return () => store.dispatch(Actions.Increment);
                  },
                  builder: (context, callback) {
                    return OutlineButton(
                      child: Text('+'),
                      onPressed: callback,
                    );
                  },
                ),
                StoreConnector<int, VoidCallback>(
                  converter: (store) {
                    return () => store.dispatch(Actions.Decrement);
                  },
                  builder: (context, callback) {
                    return OutlineButton(
                      child: Text('-'),
                      onPressed: callback,
                    );
                  },
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    OutlineButton(
                      child: Icon(Icons.refresh),
                      onPressed: () {
                        if (mounted) setState(() {});
                      },
                    ),
                    OutlineButton(
                      child: Icon(Icons.clear),
                      onPressed: () {
                        if (mounted)
                          setState(() {
                            _build = '';
                          });
                      },
                    ),
                  ],
                )
              ],
            ),
          )),
    );
  }

然后定义一下点击事件处理函数,这里使用enum来区分不同的事件，默认是不处理。

enum Actions { Increment, Decrement }
int counterReducer(int state, dynamic action) {
  if (action == Actions.Increment) {
    return state + 1;
  } else if (action == Actions.Decrement) {
    return state - 1;
  }
  return state;
}

store是一个对象需要在使用前定义好

final store = Store(counterReducer, initialState: 0);

显示的时候这样子

StoreConnector<int, String>(
      converter: (store) => store.state.toString(),
      builder: (context, count) {
        _build += 's1';
        return Text('$count');
      },
    )

当然一个页面可以多个显示的数据可以使用store<Model>来显示不同的数据的。我们显示两个数据，当数据刷新则分别刷新，互相不影响。

Model定义如下：

class _Model {
  int value, count;
  _Model({this.value, this.count}) {
    value ??= 0;
    count ??= 0;
  }
}

操作的action和函数定义如下：

_Model counterReducer(_Model state, dynamic action) {
  if (action == Actions.IncrementValue) {
    state.value += 1;
    return state;
  } else if (action == Actions.DecrementCount) {
    state.count -= 1;
    return state;
  } else if (action == Actions.IncrementCount) {
    state.count += 1;
  } else if (action == Actions.DecrementValue) {
    state.value -= 1;
  }
  return state;
}

enum Actions { IncrementValue, IncrementCount, DecrementCount, DecrementValue }

效果如下：

image

在这里p1表示整个页面刷新一下，s1表示value刷新一次，s2表示刷新一次。
完整代码查看

其实这里写法已经是页面局部刷新了，性能也是达到了高水准。