Flutter插件w_flux的使用_w_flux是一个灵感来源于 Facebook 的 Flux 和 RefluxJS 的 Dart 应用架构库

Flutter插件w_flux的使用_w_flux是一个灵感来源于 Facebook 的 Flux 和 RefluxJS 的 Dart 应用架构库

w_flux 是一个灵感来源于 Facebook 的 Flux 和 RefluxJS 的 Dart 应用架构库。它实现了一个单向数据流模式，包括 Actions、Stores 和 FluxComponents。

Flutter插件w_flux概述

在 w_flux 中，Actions 触发 Stores 中的数据变更。Stores 中的数据变更会触发 FluxComponents 的重新渲染。用户与 FluxComponents 的交互会触发 Actions 的分派，从而形成一个循环。

包含内容

Action

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

import 'package:w_flux/w_flux.dart';

// 定义一个 Action
final Action<String> displayString = new Action<String>();

// 分派 Action 并附带负载
displayString('somePayload');

// 监听 Action 的分派
displayString.listen(_displayAlert);

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

提示: Actions 是可等待的！它们返回一个在所有注册的 Action 监听器完成后完成的 Future。这在单元测试代码中非常有用，但在正常应用程序代码中不建议使用。

Store

Store 是应用状态的仓库和管理者。在 w_flux 中，应扩展 Store 类以满足应用及其数据的需求。

import 'package:w_flux/w_flux.dart';

class RandomColorStore extends Store {

  // 公共数据只能通过 getter 方法访问
  String _backgroundColor = 'gray';
  String get backgroundColor => _backgroundColor;

  // 在实例化时传递相关的 Action
  RandomColorActions _actions;

  RandomColorStore(RandomColorActions this._actions) {
    // 监听相关的 Action 分派
    _actions.changeBackgroundColor.listen(_changeBackgroundColor);
  }

  _changeBackgroundColor(_) {
    // Action 分派触发内部数据变更
    _backgroundColor = '#' + (new Random().nextDouble() * 16777215).floor().toRadixString(16);

    // 通知外部监听器新数据可用
    trigger();
  }
}

提示: Stores 可以使用流转换器来修改 trigger 流的标准行为。这可用于限制高频率 Store 变更对 UI 渲染的影响。

提示: Stores 提供了一种简洁的语法，用于 Action -> 数据变更 -> 触发操作。

// 详细语法
actions.incrementCounter.listen(_handleAction);

_handleAction(payload) {
    // 执行数据变更
    counter += payload;
    trigger();
  }

// 等效简洁语法
triggerOnAction(actions.incrementCounter, (payload) => counter += payload);

FluxComponent

FluxComponents 定义了 w_flux 单元的（可选）用户界面，并负责基于 Store 数据渲染应用视图。FluxComponents 监听 Stores 并根据其 trigger 分派选择性地重新渲染。

import 'package:react/react.dart' as react;
import 'package:w_flux/w_flux.dart';

var RandomColorComponent = react.registerComponent(() => new _RandomColorComponent());
class _RandomColorComponent extends FluxComponent<RandomColorActions, RandomColorStore> {
  render() {
    return react.div({
      // 通过 Store 的公共 getter 访问 backgroundColor
      'style': {'padding': '50px', 'backgroundColor': store.backgroundColor, 'color': 'white'}
    }, [
      'This module uses a flux pattern to change its background color.',
      react.button({
        'style': {'padding': '10px', 'margin': '10px'},
        // 通过分派 Action 来改变背景色
        'onClick': actions.changeBackgroundColor
      }, 'Change Background Color')
    ]);
  }
}

提示: 可选覆盖用于更细粒度的控制 FluxComponent 的渲染。

如果 FluxComponent 的 Store 实际上是一个复杂的对象，包含多个 Stores（每个 trigger 独立），则可以重写组件的 redrawOn 列表以限制仅响应特定子存储的 trigger 分派进行重新渲染。

import 'package:react/react.dart' as react;
import 'package:w_flux/w_flux.dart';

class ComplexStore {
  ThisStore thisOne = new ThisStore();
  ThatStore thatOne = new ThatStore();
  OtherStore otherOne = new OtherStore();
}

var ComplexComponent = react.registerComponent(() => new _ComplexComponent());
class _ComplexComponent extends FluxComponent<ComplexActions, ComplexStore> {

  // 仅响应来自这些 Store 的 trigger 进行重新渲染
  redrawOn() => [store.thisOne, store.thatOne];

  // 每当 store.otherOne 触发时，_handleOtherTrigger 方法将被执行
  getStoreHandlers() => {store.otherOne: _handleOtherTrigger};

  _handleOtherTrigger(otherStore) {
    // 根据某些标准决定是否重新渲染
    if (otherStore.isReady) {
      // 手动发起重新渲染
      redraw();
    }
  }

  render() {
    ...
  }
}