在正式介绍 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表示刷新一次。
完整代码查看
其实这里写法已经是页面局部刷新了，性能也是达到了高水准。
网友评论