name: asyncredux-provider-integration description: 集成AsyncRedux与Provider包。涵盖使用provider_for_redux、ReduxSelector小部件，以及在StoreConnector和ReduxSelector方法之间选择。

Provider 与 AsyncRedux 集成

provider_for_redux 包桥接Provider和AsyncRedux，使您能够将Provider的依赖注入与Redux状态管理结合使用。

安装

将包添加到您的 pubspec.yaml：

dependencies:
  provider_for_redux: ^8.0.0

设置 AsyncReduxProvider

用 AsyncReduxProvider 替换 StoreProvider，以向子代小部件暴露三个项目：

Redux存储 (Store<AppState>)
应用程序状态 (AppState)
分发方法 (Dispatch)

import 'package:provider_for_redux/provider_for_redux.dart';

void main() {
  final store = Store<AppState>(initialState: AppState.initial());

  runApp(
    AsyncReduxProvider<AppState>.value(
      value: store,
      child: MaterialApp(home: MyHomePage()),
    ),
  );
}

使用 Provider.of 访问状态

使用标准Provider模式直接访问存储组件：

// 访问状态（状态变化时重建）
final counter = Provider.of<AppState>(context).counter;

// 访问分发（对操作使用 listen: false）
Provider.of<Dispatch>(context, listen: false)(IncrementAction());

// 直接访问存储
final store = Provider.of<Store<AppState>>(context, listen: false);

ReduxConsumer 小部件

ReduxConsumer 在单个构建器中提供存储、状态和分发，简化访问：

ReduxConsumer<AppState>(
  builder: (context, store, state, dispatch, child) {
    return Column(
      children: [
        Text('计数器: ${state.counter}'),
        Text('描述: ${state.description}'),
        ElevatedButton(
          onPressed: () => dispatch(IncrementAction()),
          child: Text('增加'),
        ),
      ],
    );
  },
)

ReduxSelector 小部件

ReduxSelector 通过选择特定状态部分来防止不必要的重建。只有当所选值发生变化时，小部件才会重建。

使用列表（推荐）

最简单的方法 - 明确列出应触发重建的属性：

ReduxSelector<AppState, dynamic>(
  selector: (context, state) => [state.counter, state.description],
  builder: (context, store, state, dispatch, model, child) {
    return Column(
      children: [
        Text('计数器: ${state.counter}'),
        Text('描述: ${state.description}'),
        ElevatedButton(
          onPressed: () => dispatch(IncrementAction()),
          child: Text('增加'),
        ),
      ],
    );
  },
)

使用自定义模型

对于结构化数据，使用Tuple或自定义类：

ReduxSelector<AppState, Tuple2<int, String>>(
  selector: (context, state) => Tuple2(state.counter, state.description),
  builder: (context, store, state, dispatch, model, child) {
    return Column(
      children: [
        Text('计数器: ${model.item1}'),
        Text('描述: ${model.item2}'),
        ElevatedButton(
          onPressed: () => dispatch(IncrementAction()),
          child: Text('增加'),
        ),
      ],
    );
  },
)

在 StoreConnector 和 ReduxSelector 之间选择

两种方法都管理状态变化期间的小部件重建，但服务于不同的用例：

使用 StoreConnector 当：

您想分离智能（存储感知）和笨（表示性）小部件
您需要具有显式相等性比较的视图模型
您正在构建不应了解Redux的可重用UI组件
您想在不使用存储的情况下隔离测试UI小部件

class MyCounterConnector extends StatelessWidget {
  Widget build(BuildContext context) {
    return StoreConnector<AppState, ViewModel>(
      vm: () => Factory(this),
      builder: (context, vm) => MyCounter(
        counter: vm.counter,
        description: vm.description,
        onIncrement: vm.onIncrement,
      ),
    );
  }
}

class ViewModel extends Vm {
  final int counter;
  final String description;
  final VoidCallback onIncrement;

  ViewModel({
    required this.counter,
    required this.description,
    required this.onIncrement,
  }) : super(equals: [counter, description]);
}

使用 ReduxSelector 当：

您喜欢最少的样板代码
在单个小部件内直接访问存储是可接受的
您想要Provider风格的依赖注入
您正在与现有的基于Provider的代码集成

ReduxSelector<AppState, dynamic>(
  selector: (context, state) => [state.counter, state.description],
  builder: (context, store, state, dispatch, model, child) {
    return MyCounter(
      counter: state.counter,
      description: state.description,
      onIncrement: () => dispatch(IncrementAction()),
    );
  },
)

迁移策略

Provider和AsyncRedux连接器同时工作，支持渐进式迁移：

// 使用StoreConnector的旧代码继续工作
class OldFeatureConnector extends StatelessWidget {
  Widget build(BuildContext context) {
    return StoreConnector<AppState, OldViewModel>(
      vm: () => OldFactory(this),
      builder: (context, vm) => OldFeatureWidget(vm: vm),
    );
  }
}

// 新代码可以使用ReduxSelector
class NewFeatureWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return ReduxSelector<AppState, dynamic>(
      selector: (context, state) => [state.newFeature],
      builder: (context, store, state, dispatch, model, child) {
        return NewFeatureContent(feature: state.newFeature);
      },
    );
  }
}

这允许您逐步迁移，而无需重写整个应用程序。

比较摘要

方面	StoreConnector	ReduxSelector
样板代码	更多（视图模型 + 工厂）	更少（内联选择器）
分离	智能/笨小部件模式	单个小部件
测试	易于隔离测试UI	需要存储设置
Provider兼容性	原生AsyncRedux	完整的Provider集成
重建控制	通过视图模型相等性	通过选择器列表

参考

文档中的URL：