Flutter选择器优化插件reselect的使用

Reselect for Dart

Reselect是一个为Dart编写的Selector库，基于原始的Reselect JavaScript库。

• 选择器（Selectors）：从单个输入（如Redux Store的状态）派生数据的函数。
• 单点访问：提供对Redux Store中数据的单一入口。
• 计算派生数据：允许Redux存储最小可能状态。
• 高效性：只有在参数变化时才会重新计算派生数据。
• 可组合性：可以组合以创建更复杂的选择器。

注意：此库和示例是针对Redux的，但也可以与任何Redux实现或数据源一起使用。

安装

请参阅包页面上的安装说明：https://pub.dartlang.org/packages/reselect#pub-pkg-tab-installing

示例

动机

让我们通过一个简单的Redux示例来解释我们的动机。假设我们有一个AppState，它保存了一个产品列表和商店名称。我们希望显示所有打折的产品，并且还需要过滤出价格低于10美元的产品。

// 定义Product类
class Product {
  String name;
  bool onSale;
  double price;

  Product(this.name, this.price, [this.onSale = false]);

  // 辅助构造函数，用于创建打折商品
  factory Product.onSale(String name, double price) => Product(name, price, true);
}

// 创建一个包含应用状态的类
class AppState {
  final String shopName;
  final List<Product> products;

  AppState(this.shopName, this.products);
}

// 创建应用状态
final appState = AppState("Brian's Keyboard Stop", [
  Product("Cherry Mx Red switch", 14.99),
  Product("Cherry Mx Blue switch", 9.99),
  Product.onSale("Cherry Mx Brown switch", 8.99),
]);

// 创建一个查找打折产品的函数
final selectOnSaleProduct = (AppState state) =>
    state.products.where((product) => product.onSale);

// 创建一个查找价格低于10美元的产品的函数
final affordableProductsSelector = (AppState state) =>
    state.products.where((product) => product.price < 10.00);

创建单点访问

现在，我们将创建一个选择器函数，用于从应用状态中选择产品，作为单点访问。

// 创建一个选择器函数，用于从AppState中选择产品
final productsSelector = (AppState state) => state.products;

// 使用单点访问更新之前的筛选函数
final selectOnSaleProduct = (AppState state) =>
    productsSelector(state).where((product) => product.onSale);

// 查找价格低于10美元的产品
final affordableProductsSelector = (AppState state) =>
    productsSelector(state).where((product) => product.price < 10.00);

缓存计算值

接下来，我们将使用createSelector1到createSelector10函数来缓存计算结果。

// 计算所有打折产品，仅当产品列表发生变化时才重新计算
final onSaleSelector = createSelector1(
  productsSelector,
  (products) => products.where((product) => product.onSale),
);

// 缓存查找价格低于10美元的产品的函数
final affordableProductsSelector = createSelector1(
  productsSelector,
  (products) => products.where((product) => product.price < 10.00),
);

// 打印所有打折产品
print(onSaleSelector(appState));

// 再次打印，如果产品未变化，则返回缓存的结果
print(onSaleSelector(appState));

组合选择器

现在，我们将组合两个缓存的选择器，创建一个新的选择器。

// 使用`createSelector2`组合两个选择器
final snapDealsSelector = createSelector2(
  onSaleSelector,
  affordableProductsSelector,
  (onSaleProducts, affordableProducts) =>
      ([]..addAll(onSaleProducts)..addAll(affordableProducts)),
);

总结

我们已经：

• 将直接访问AppState中的产品改为使用选择器作为单点访问。
• 使用createSelector1缓存昂贵的选择器，以便仅在依赖的数据变化时重新计算。
• 使用createSelector2组合两个缓存的选择器，创建新的缓存选择器。

更多内容

更改缓存机制

默认的缓存函数来自memoize包，使用==方法确定输入是否变化。如果需要更改其工作方式，可以提供自己的缓存函数。

// 提供自定义的缓存函数，比较输入的身份而不是使用`==`方法
final onSaleSelector = createSelector1(
  productsSelector,
  (products) => products.where((product) => product.onSale),
  memoize: (Func1<List<Product>, List<Product>> combiner) {
    List<Product> prevProductsArg;
    List<Product> prevOnSaleProducts;

    return ((List<Product> productsArg) {
      if (identical(productsArg, prevProductsArg)) {
        return prevOnSaleProducts;
      } else {
        prevProductsArg = productsArg;
        prevOnSaleProducts = combiner(productsArg);

        return prevOnSaleProducts;
      }
    });
  },
);

这就是如何使用reselect库优化Flutter中的选择器。通过这些步骤，您可以创建更健壮、高效的代码结构。