使用Flutter和Redux（flutter_redux）如何从应用程序状态中取消窗口小部件？

Question

假设Flutter应用程序使用Redux进行状态管理（flutter_redux）。

该州是一个类AppState，商店是Store<AppState>（例如像这样：http://flutterbyexample.com/app-state-model）。

然后容器小部件使用StoreConnector<AppState, ...>，它依赖于AppState。这些小部件与AppState紧密结合。那么我如何在其他应用程序中重用小部件，因为其他应用程序有不同的AppState？

如果小部件依赖于AppState，我怎么能单独开发和测试容器小部件，并且AppState在它们中很常见？

Answer 1

In this blog post我解释了如何开始在Flutter中使用Redux。

从代码示例中可以看出，您可以创建一个ViewModel类，而不是将Widgets耦合到State，这意味着如果您为计划重用的每个ViewModel创建一个Widget类，您应该能够创建测试ViewModel用于测试对象，并在多个项目中重用这些Widgets。

编辑：

您可以创建一个特定于State的Widget类（即ToggleState并使用State对象组合您的应用程序ToggleState类：

class AppState {
  final ToggleWidgetState onOffState;
}

class ToggleWidgetState {
  final bool isOn;
}

并且你的ViewModel可以从ToggleWidgetState而不是整个AppState创建，所以尝试从各种较小的状态对象组成你的app状态。

Answer 2

我认为真正可重用的组件只是presentational组件。

这些是没有国家管理的组成部分（没有StoreConnector，没有StoreBuilder ......）。

演示组件示例：

class ExampleItem extends StatelessWidget {

  final Example example;

  ExampleItem({   
    @required this.example,
  });

  @override
  Widget build(BuildContext context) {
    return ListTile(        
        title: Hero(
          tag: '${example.id}__heroTag',
          child: Container(
            width: MediaQuery.of(context).size.width,
            child: Text(
              example.name,
              key: ExampleKeys.exampleItemName(example.id),
              style: Theme.of(context).textTheme.title,
            ),
          ),
        ),      
      );   
  }
}

容器组件示例：

class ExampleContainer extends StatelessWidget {
  ExampleContainer({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, _ViewModel>(     
      converter: _ViewModel.fromStore,
      builder: (context, vm) {
        return ExampleList(
          list: vm.list,        
        );
      },
    );
  }
}

class _ViewModel {
  final List<Example> list;

  _ViewModel({this.list});

  static _ViewModel fromStore(Store<AppState> store) {
    return _ViewModel(list: listSelector(store.state));
  }
}