icecream-composable.js

import { from, fromEvent, zip } from 'rxjs';
import { scan } from 'rxjs/operators';

const initialIceCreamFlavors = ['vanilla', 'chocolate', 'strawberry'];
const initialIceCreamPrices = ['$5.50', '$5.75', '$6.00'];

const iceCreamFormSubmit$ = fromEvent(formEl, 'submit');
const iceCreamFormFlavors$ = iceCreamFormSubmit$.pipe((map(({flavor}) => flavor)));
const iceCreamFormPrices$ = iceCreamFormSubmit$.pipe((map(({price}) => price)));

const iceCreamFlavors$ = iceCreamFormFlavors$.pipe(
  scan((prev, flavor) => {
    return [...prev, flavor];
  }, initialIceCreamFlavors),
);
const iceCreamPrices$ = iceCreamFormPrices$.pipe(
  scan((prev, price) => {
    return [...prev, price];
  }, initialIceCreamPrices),
);

const iceCreamFlavorToPrice$ = zip(
  iceCreamFlavors$,
  iceCreamPrices$,
).pipe(scan((prev, [flavor, price]) => {
  return {
    ...prev,
    [flavor]: price
  };
}, {}));