StoreConnector 还是 StoreBuilder，让 distinct 把好关

2023-11-27 21:19:14

探索 Redux 的魔力：StoreConnector 与 StoreBuilder

在 Flutter 的世界中，管理应用程序状态至关重要，而 Redux 以其单一事实来源和简化的状态管理机制脱颖而出。要连接 Redux 存储和 Flutter 小部件，StoreConnector 和 StoreBuilder 成为必备工具。让我们深入探讨它们的异同，帮助您驾驭 Redux 的强大功能。

StoreConnector：自动重建，性能优化

StoreConnector 是一个 Flutter 小部件，将构建函数与 Redux 存储状态连接起来。它的核心优势在于自动重建功能。每当 Redux 存储状态发生变化时，StoreConnector 都会无缝地重建子小部件，确保应用程序状态与 Redux 存储保持同步。

此外，StoreConnector 还内置了 distinct 方法，它可以智能地防止不必要的重建。这对于优化性能至关重要，因为它仅在 Redux 存储状态发生显着变化时才触发重建。

StoreBuilder：灵活重建，自定义控制

StoreBuilder 是一个构建函数，它允许您定义如何将 Redux 存储状态映射到小部件。它提供了比 StoreConnector 更灵活的重建机制。只有当 Redux 存储状态发生变化时，StoreBuilder 才会重建子小部件。

与 StoreConnector 不同，StoreBuilder 并没有内置 distinct 方法。这意味着您需要手动处理重建逻辑以避免不必要的重建。这提供了更大的灵活性，但同时也需要更谨慎地管理状态。

选择合适的工具

StoreConnector 和 StoreBuilder 都是强大的工具，但它们在适用场景上略有不同：

StoreConnector： 适用于需要频繁重建的小部件，例如列表或网格。其自动重建功能和 distinct 方法可以显著提高性能。
StoreBuilder： 适用于只需要在 Redux 存储状态发生变化时重建的小部件。它提供了对重建过程的完全控制。

使用指南

StoreConnector：

import 'package:flutter_redux/flutter_redux.dart';

class MyWidget extends StatelessWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, int>(
      converter: (store) => store.state.count,
      builder: (context, count) => Text('Count: $count'),
      distinct: true,
    );
  }
}

StoreBuilder：

import 'package:flutter_redux/flutter_redux.dart';

class MyWidget extends StatelessWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return StoreBuilder<AppState>(
      builder: (context, store) => Text('Count: ${store.state.count}'),
    );
  }
}