[ - Flutter 状态篇 redux - ] StoreConnector仍是StoreBuilder，让distinct把好关
不少天没发文了，今天翻翻源码，发现解决一个困扰个人问题：redux中
的StoreConnector仍是StoreBuilder彷佛均可以定点刷新，控制粒度。那它们有什么区别呢?在官方样例中基本都用StoreConnector包裹一个组件的最顶层，而且特别是在StoreBuilder源码中注释让我内心咯噔一下:我偏心的StoreBuilder居然是下下签，推荐使用StoreConnector。喵了个咪，重构一下世界观。编程
/// Build a Widget by passing the [Store] directly to the build function.
///
/// Generally, it's considered best practice to use the [StoreConnector] and to
/// build a `ViewModel` specifically for your Widget rather than passing through
/// the entire [Store], but this is provided for convenience when that isn't
/// necessary.
复制代码
既然不服那就来测：redux
1.StoreConnector 对战 StoreBuilder 第一回合
1.1:三件套先搞上
class CountState {
final int counter; //计时器数字
CountState(this.counter);
factory CountState.init([int counter]) => CountState(counter ?? 0);
}
//行为
class ActionCountAdd {}
//处理器
var countReducer =
TypedReducer<CountState, ActionCountAdd>((state, action) {
var counter;
if(action is ActionCountAdd) counter = state.counter + 1;
return CountState(counter);
});
复制代码
1.2:把老爹先认着
void main() => runApp(Wrapper(child: MyApp(),));
class Wrapper extends StatelessWidget {
final Widget child;
Wrapper({this.child});
final store = Store<CountState>(
//初始状态
countReducer, //总处理器
initialState: CountState.init());//初始状态
@override
Widget build(BuildContext context) {
return StoreProvider(store: store, child: child);
}
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primarySwatch: Colors.blue,),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
复制代码
1.3:视图模型
StoreConnector一般经过一个ViewHolder与仓库Store进行关联，而后将状态资源提供给视图bash
class CountViewModel {
final int count;//数字
final VoidCallback onAdd;//点击回调
CountViewModel(
{@required this.count, @required this.onAdd });
static CountViewModel fromStore(Store<CountState> store) {
return CountViewModel(
count: store.state.counter,
onAdd: () => store.dispatch(ActionCountAdd()),
);
}
}
复制代码
1.4 使用StoreConnector
可见每次都会使用只会走
StoreConnector中的builder内部，并不会执行_MyHomePageState，若是将StoreConnector定点进行链接就能够缩小更新粒度微信
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
print("MyHomePage--------builder");
return StoreConnector<CountState, CountViewModel>(
converter: CountViewModel.fromStore,
builder: (context, vm) {
print("StoreConnector--------builder");
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[Text(
'You have pushed the button this many times:',
style: TextStyle(
fontSize: 18),
),
Text('${vm.count}',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: vm.onAdd,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
});
}
}
复制代码
1.5 使用StoreBuilder
StoreBuilder直接链接到Store，用起来比较简单，能打(触发事件)能抗(获取数据)。从表现上来看也是一样优秀。用起来彷佛是StoreBuilder更加简单。markdown
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
print("MyHomePage--------builder");
return StoreBuilder<CountState>(
builder: (context, store) {
print("StoreBuilder--------builder");
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[Text(
'You have pushed the button this many times:',
style: TextStyle(
fontSize: 18),
),
Text('${store.state.counter}',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: ()=> store.dispatch(ActionCountAdd()),
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
});
}
}
复制代码
2.StoreConnector 对战 StoreBuilder 第二回合
2.1 场景布置
添加一个ActionCountNone的行为，点击数字触发，数字状态保持原样。点三下自加事件，两次不加事件。查看结果app
class CountState {
final int counter; //计时器数字
CountState(this.counter);
factory CountState.init([int counter]) => CountState(counter ?? 0);
}
//切换主题行为
class ActionCountAdd {}
class ActionCountNone {}
//切换主题理器
var countReducer =
TypedReducer<CountState, ActionCountAdd>((state, action) {
var counter;
if(action is ActionCountAdd) counter = state.counter + 1;
if(action is ActionCountNone) counter = state.counter ;
return CountState(counter);
});
复制代码
2.2：StoreBuilder出战
可见状态量未改变，但界面刷新了。虽然定点的刷新能够控制粒度，但粒度小，StoreBuilder就会用得多，虽小，但状态量不变，刷新了也是事实。less
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
print("MyHomePage--------builder");
return StoreBuilder<CountState>(
builder: (context, store) {
print("StoreBuilder--------builder");
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[Text(
'You have pushed the button this many times:',
style: TextStyle(
fontSize: 18),
),
InkWell(
onTap: ()=> store.dispatch(ActionCountNone()),//<--不加
child: Text('${store.state.counter}',
style: Theme.of(context).textTheme.display1,
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: ()=> store.dispatch(ActionCountAdd()),
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
});
}
}
复制代码
2.2：StoreConnector出战
StoreConnector冷笑:
哥们，瞧个人
这里重写了CountViewModel的判等，可见当CountViewModel状态量不变时，界面不刷新
若是想让他刷新，能够控制distinct属性。因此StoreConnector彷佛更胜一筹。ide
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
print("MyHomePage--------builder");
return StoreConnector<CountState, CountViewModel>(
distinct: true,
converter: CountViewModel.fromStore,
builder: (context, vm) {
print("StoreConnector--------builder");
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[Text(
'You have pushed the button this many times:',
style: TextStyle(
fontSize: 18),
),
InkWell(
onTap: vm.onNone,
child: Text('${vm.count}',
style: Theme.of(context).textTheme.display1,
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: vm.onAdd,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
});
}
}
class CountViewModel {
final int count;//数字
final VoidCallback onAdd;//点击回调
final VoidCallback onNone;//点击回调
CountViewModel(
{@required this.count, @required this.onAdd,@required this.onNone, });
static CountViewModel fromStore(Store<CountState> store) {
return CountViewModel(
count: store.state.counter,
onAdd: () => store.dispatch(ActionCountAdd()),
onNone: () => store.dispatch(ActionCountNone()),
);
}
@override
bool operator ==(Object other) =>
identical(this, other) ||
other is CountViewModel &&
runtimeType == other.runtimeType &&
count == other.count;
@override
int get hashCode => count.hashCode;
}
复制代码
到这你彷佛又要说谁好谁坏了，那我只有呵呵了。没有好坏，只要适合和不适合，StoreConnector须要ViewModel对于一些较大块的组件可使用。若是就一两个字段或是犄角旮旯里的小组件，StoreBuilder也是很精简的，刷一下就刷呗，犯不着为了一分钱去搬砖。知道它们在干什么最重要，而不是评论好坏。不然只会沦落键盘侠和喷嘴...还不如来个人Flutter群里交流技术。手动搞笑。ui
结语
本文到此接近尾声了，若是想快速尝鲜Flutter，《Flutter七日》会是你的必备佳品;若是想细细探究它,那就跟随个人脚步，完成一次Flutter之旅。
另外本人有一个Flutter微信交流群，欢迎小伙伴加入，共同探讨Flutter的问题，本人微信号:zdl1994328，期待与你的交流与切磋。另外欢迎关注公众号编程之王this
相关文章
- 1. [- Flutter 数据&状态篇 -] redux
- 2. Flutter | 状态管理探索篇——Redux（二）
- 3. Flutter之状态管理（Redux）flutter_redux
- 4. Flutter 状态管理之 Scoped Model & Redux
- 5. Flutter状态管理
- 6. Flutter Redux 食用总结
- 7. flutter Provide 状态管理篇
- 8. Flutter 记录 - Flutter State Management (Redux)使用介绍
- 9. Flutter redux 进阶
- 10. Flutter状态管理学习手册(二)——Redux
- 更多相关文章...
- • HTTP状态码 - HTTP 教程
- • SQLite Distinct 关键字 - SQLite教程
- • NewSQL-TiDB相关
- • 再有人问你分布式事务，把这篇扔给他
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章