50. Project: autosave draft

Project 2 — autosaving a draft

Similar to typeahead, but with one key difference: instead of switchMap, here you need concatMap.

Why concatMap, not switchMap

For search, the old results aren't needed — they can be cancelled. For saving, you can't cancel: once the data has gone to the server, a client-side cancel undoes nothing on the server. Worse — run two saves in parallel and, if the second finishes first, an old response can overwrite the newer state.

concatMap queues the saves: one after another. Safe and predictable.

const { debounceTime, distinctUntilChanged, concatMap } = Rx;

function createAutosave$(formValue$, saveDraft) {
  return formValue$.pipe(
    debounceTime(20),
    distinctUntilChanged(),
    concatMap(value => saveDraft(value))
  );
}