[ - 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.
复制代码

既然不服那就来测：

---

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进行关联，然后将状态资源提供给视图

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更加简单。

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的行为，点击数字触发，数字状态保持原样。点三下自加事件，两次不加事件。查看结果

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就会用得多，虽小，但状态量不变，刷新了也是事实。

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似乎更胜一筹。

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群里交流技术。手动搞笑。

---

结语

本文到此接近尾声了，如果想快速尝鲜Flutter，《Flutter七日》会是你的必备佳品;如果想细细探究它,那就跟随我的脚步，完成一次Flutter之旅。
另外本人有一个Flutter微信交流群，欢迎小伙伴加入，共同探讨Flutter的问题，本人微信号:zdl1994328，期待与你的交流与切磋。另外欢迎关注公众号编程之王