폼이 유효해지면 제출 버튼 켜기

우열 없음 async

요구사항

가입 폼에 필드가 두 개 있습니다. 이메일 필드는 nam, 그다음 nam@fx.dev를 내보내고; 비밀번호 필드는 hunter2, 그다음 box-belt-42를 내보냅니다 — 고정된 교차 오프셋으로. 두 필드가 모두 값을 낸 뒤부터는 변경이 있을 때마다 최신 값 쌍을 재평가하고(유효 = 이메일에 @ 포함, 비밀번호 8자 이상) 결합된 상태를 출력하세요 — 필드 이벤트 네 건에서 세 줄이 나옵니다. 첫 변경은 비밀번호가 말하기 전에 도착하기 때문입니다; 마지막으로 제출 버튼의 최종 상태로 마무리합니다. 두 버전 모두 예상 출력 아래에 표시된 줄들을 출력해야 합니다.

예상 출력

email=nam password=hunter2 -> disabled
email=nam@fx.dev password=hunter2 -> disabled
email=nam@fx.dev password=box-belt-42 -> enabled
submit: enabled

나란히 보기

RxDart

import 'dart:async';

import 'package:rxdart/rxdart.dart';

/// Simulated form input: each field emits at fixed offsets.
Stream<String> emails() {
  final c = StreamController<String>();
  Timer(Duration.zero, () => c.add('nam'));
  Timer(const Duration(milliseconds: 160), () => c.add('nam@fx.dev'));
  Timer(const Duration(milliseconds: 400), c.close);
  return c.stream;
}

Stream<String> passwords() {
  final c = StreamController<String>();
  Timer(const Duration(milliseconds: 80), () => c.add('hunter2'));
  Timer(const Duration(milliseconds: 240), () => c.add('box-belt-42'));
  Timer(const Duration(milliseconds: 400), c.close);
  return c.stream;
}

bool valid(String email, String password) =>
    email.contains('@') && password.length >= 8;

Future<void> main() async {
  final states = await Rx.combineLatest2(
      emails(), passwords(), (String e, String p) => (e, p)).toList();

for (final (e, p) in states) {
    print('email=$e password=$p -> ${valid(e, p) ? 'enabled' : 'disabled'}');
  }
  final (e, p) = states.last;
  print('submit: ${valid(e, p) ? 'enabled' : 'disabled'}');
}

FxDart

import 'dart:async';

import 'package:fxdart/fxdart.dart';

bool valid(String email, String password) =>
    email.contains('@') && password.length >= 8;

Future<void> main() async {
  final states = await fxEvents(emails())
      .combineLatest(passwords(), (e, p) => (e, p))
      .toList();

차이가 나는 이유

다르지 않습니다. 소스별 최신 값 상태는 push 모델을 정의하는 결합자이고, 두 패널 모두 그것을 한 줄로 선언합니다: 각 필드의 가장 새 값을 붙들고, 둘 다 말할 때까지 기다렸다가, 어느 쪽에서든 변경이 있을 때마다 그 쌍을 다시 내보낸다. RxDart는 Rx.combineLatest2(emails(), passwords(), ...)라고 쓰고; fxdart는 fxEvents(emails()).combineLatest(passwords(), ...)라고 씁니다. 같은 대기 규칙, 어느 쪽에서든 같은 재방출, 둘 다 닫히면 닫히는 같은 규칙 — fxdart 패널이 예전에 손으로 말던 태그 병합-폴드는 사라졌습니다.

fxdart의 이벤트 레이어는 정확히 이런 종류의 일을 위해 Rx의 접근을 흡수했습니다: 평범한 Stream 위의 의도된 래퍼 체인으로 — extension이 아니어서 rxdart든 다른 어떤 스트림 라이브러리든 충돌 없이 공존합니다 — pull 파이프라인이 가질 수 없는 최신 값 결합자들을 실어 나릅니다. 정직한 단서 하나는 그대로입니다: RxDart의 연산자 카탈로그는 fxdart의 이벤트 레이어보다 여전히 훨씬 큽니다. 결합된 폼 상태가 타입 있는 요구 주도 작업 — 이를테면 타입 있는 에러를 가진 검증된 제출 호출 — 을 구동해야 할 때는 .pull()이 라이브 쌍들에서 FxAsync 파이프라인으로 건너갑니다.

벤치마크

이 예제에는 벤치마크가 없습니다. 이 연산자는 처리한 일의 양이 아니라 흘러간 시간으로 정의됩니다. 양쪽 모두 똑같은 시간 창을 기다리므로, 막대는 두 라이브러리가 아니라 Dart의 타이머를 재게 됩니다. 시간 창을 줄여도 해결되지 않습니다 — 그러면 한 번의 이벤트 폭주에서 몇 개의 값이 나오는지가 머신 속도에 좌우되고, 두 구현이 같은 결과를 냈는지 대조할 수 없게 되기 때문입니다. 타이밍 연산자로 만들어진 예제들을 측정하지 않고 두는 이유가 이것입니다. 지연이 그저 I/O를 흉내 낼 뿐인 예제들은 그 지연을 0으로 두고 벤치마크합니다.