flutter_flux

一个 Dart 应用架构库，具有受 RefluxJS 和 Facebook 的 Flux 启发的单向数据流

这是一个实验性包，不包含Flutter团队的官方支持。但是，我们非常欢迎您提供反馈！

概述

flutter_flux-1

flutter_flux实现了一种由Actions、Stores和StoreWatchers组成的单向数据流模式。
它基于w_flux，但已修改为使用Flutter而非React。

  • Actions会发起对位于Stores中的应用程序数据的变更。
  • Stores内的数据变更会触发应用程序视图（在StoreWatcher中定义）的重新渲染。
  • Flutter的Widgets和其他交互源会在用户交互后分发Actions。
  • 然后循环继续……

包含内容

操作

Action是一个可以分发（带可选数据负载）并被监听的命令。

在flutter_flux中，Actions是应用程序状态更改的唯一驱动程序。Widgets和其他对象会在用户与渲染视图交互后分发Actions。
Stores会监听这些Action分发，并根据需要考虑Action负载，在其内部数据中进行相应的修改。
根据需要考虑Action负载。

import 'package:flutter_flux/flutter_flux.dart';

// define an action
final Action<String> displayString = new Action<String>();

// dispatch the action with a payload
displayString('somePayload');

// listen for action dispatches
displayString.listen(_displayAlert);

_displayAlert(String payload) {
  print(payload);
}

奖励：Actions是可等待的！

它们返回一个Future，该Future在所有已注册的Action监听器完成后完成。通常不建议在常规应用程序代码中使用此功能，但它在单元测试代码中非常有用。
在单元测试代码中非常有用。

存储

Store是应用程序状态的存储库和管理器。flutter_flux提供的基础Store类应被扩展，以适应您的应用程序及其数据需求。应用程序状态可以分布在许多独立的Stores中，具体取决于应用程序的复杂性和您期望的应用程序架构。
应用程序架构。
根据约定，Store的内部数据不能直接修改。相反，Store数据会在响应Action分发时在内部进行修改。

进行修改。
Stores应被视为只读，仅通过getter方法公开相关数据。这种有限的数据访问确保了单向数据流的完整性得到维护。
维护。

可以监听Store以接收其数据更改的外部通知。每当Store中的数据发生更改时，就会使用trigger方法来通知任何已注册的监听器，表明有更新的数据可用。在flutter_flux中，StoreWatchers会监听Stores，通常会根据更新的Store数据触发UI元素的重新渲染。
重新渲染。
触发UI元素。

import 'package:flutter_flux/flutter_flux.dart';

class RandomColorStore extends Store {

  // Public data is only available via getter method
  String _backgroundColor = 'gray';
  String get backgroundColor => _backgroundColor;

  // Actions relevant to the store are passed in during instantiation
  RandomColorActions _actions;

  RandomColorStore(RandomColorActions this._actions) {
    // listen for relevant action dispatches
    _actions.changeBackgroundColor.listen(_changeBackgroundColor);
  }

  _changeBackgroundColor(_) {
    // action dispatches trigger internal data mutations
    _backgroundColor = '#' + (new Random().nextDouble() * 16777215).floor().toRadixString(16);

    // trigger to notify external listeners that new data is available
    trigger();
  }
}

奖励：Stores为action -> 数据修改 -> trigger操作提供了可选的简洁语法。

// verbose syntax
actions.incrementCounter.listen(_handleAction);

_handleAction(payload) {
    // perform data mutation
    counter += payload;
    trigger();
  }

// equivalent terse syntax
triggerOnAction(actions.incrementCounter, (payload) => counter += payload);

示例

flutter_flux用法的简单示例可以在example目录中找到。示例README
包含有关构建/运行它们的说明。

外部消耗

flutter_flux在隔离的应用程序或代码模块内实现单向数据流。如果flutter_flux被用作库的内部架构，则在定义外部API时应考虑此内部数据流。
定义外部API。

  • 旨在修改内部状态的外部API方法应像任何内部用户交互一样分发Actions。
  • 旨在查询内部状态的外部API方法应利用现有的只读Store getter方法。
  • 旨在通知消费者内部状态更改的外部API流应从内部Stores分发，类似于它们的triggers。
    Stores分发。

GitHub

https://github.com/google/flutter_flux