关于Flutter Redux中StoreConnector与StoreBuilder的区别及适用场景的疑问

Great question! I’ve wrestled with this exact distinction when working with Flutter Redux too, so let me break it down clearly for you.

Core Differences #

• ViewModel Abstraction:

  • StoreConnector requires you to define a converter function that maps the full Store to a custom ViewModel class. This lets you extract only the state properties your widget actually needs, keeping your UI code decoupled from the entire store state.
  • StoreBuilder gives you direct access to the complete Store instance in its builder function. There’s no intermediate ViewModel layer—you pull state directly from store.state right in the widget code.

• Performance Optimization:

  • StoreConnector automatically compares old and new ViewModel instances (using == by default, or a custom distinct function) to decide whether to rebuild the widget. This means your UI only updates when the specific state properties it cares about change, not on every single store update.
  • StoreBuilder doesn’t include this automatic comparison by default. If you use it without extra checks, it will rebuild every time the store’s state changes—even if the part of state your widget uses hasn’t been modified. You’d have to add manual equality checks or use selector functions to optimize rebuilds.

• Lifecycle & Extra Functionality:

  • StoreConnector comes with built-in lifecycle hooks like onInit, onDispose, and onWillChange. These let you run code when the connector initializes, cleans up, or when the ViewModel updates—handy for subscribing to side effects or tracking analytics.
  • StoreBuilder has no built-in lifecycle callbacks. If you need that kind of logic, you’d have to wrap it in a StatefulWidget and handle it yourself.

Ideal Use Cases #

When to Reach for StoreConnector #

• Complex UI Components: If your widget relies on multiple state properties or needs to transform state data (e.g., filtering a list, formatting dates) before using it, the ViewModel layer keeps your builder function clean and focused on rendering.
• Performance-Critical Screens: For screens where unnecessary rebuilds could cause jank (like scrollable lists or animations), the automatic ViewModel comparison ensures only necessary updates happen.
• Widgets Needing Lifecycle Logic: When you need to run code on connection to the store or state changes (e.g., fetching data on init, cleaning up subscriptions), the built-in callbacks save you from writing extra stateful widget boilerplate.

When to Use StoreBuilder #

• Simple, One-Off Widgets: For small widgets that only need one or two state properties (e.g., a text widget showing a counter value), direct store access is more concise—no need to create a separate ViewModel class.
• Quick Prototyping: When you’re throwing together a demo or testing state changes, StoreBuilder lets you get up and running faster without the overhead of defining converters and ViewModels.
• Custom Subscription Control: If you want full control over when the widget rebuilds (e.g., using custom selectors or debouncing updates), StoreBuilder gives you the flexibility to implement that manually.

Quick Example Comparison #

StoreConnector #

StoreConnector<AppState, CounterViewModel>(
  converter: (store) => CounterViewModel(
    count: store.state.counter,
    increment: () => store.dispatch(IncrementAction()),
  ),
  builder: (context, viewModel) {
    return ElevatedButton(
      onPressed: viewModel.increment,
      child: Text('Count: ${viewModel.count}'),
    );
  },
)

// ViewModel class with equality checks
class CounterViewModel {
  final int count;
  final VoidCallback increment;

  CounterViewModel({required this.count, required this.increment});

  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is CounterViewModel &&
          runtimeType == other.runtimeType &&
          count == other.count;

  @override
  int get hashCode => count.hashCode;
}

StoreBuilder #

StoreBuilder<AppState>(
  builder: (context, store) {
    return ElevatedButton(
      onPressed: () => store.dispatch(IncrementAction()),
      child: Text('Count: ${store.state.counter}'),
    );
  },
)

内容的提问来源于stack exchange，提问作者Flake