RxJs管道中share运算符的必要性

问题描述

我正在玩一个依赖RxJS的示例“保存指示器”。

这是完整的源代码：

import { fromEvent,of,merge,empty,concat,defer } from 'rxjs';
import {
  delay,map,mergeMap,tap,debounceTime,distinctUntilChanged,mapTo,filter,share,switchAll
} from 'rxjs/operators';
import { format } from 'date-fns';
​
// track in progress saves
let savesInProgress = 0;
​
// references
const input = document.getElementById('note-input');
const saveIndicator = document.querySelector('.save-indicator');
​
// streams
const keyup$ = fromEvent(input,'keyup');
​
// fake save request
const saveChanges = value => {
  return of(value).pipe(delay(1500));
};
​
/**
 * Trigger a save when the user stops typing for 200ms
 * After new data has been successfully saved,so a saved
 * and last updated indicator.
 */
const inputToSave$ = keyup$.pipe(
  debounceTime(200),map(e => e.target.value),distinctUntilChanged(),share()//Here!!
);
​
const savesInProgress$ = inputToSave$.pipe(
  mapTo(of('Saving')),tap(_ => savesInProgress++)
);
​
const savesCompleted$ = inputToSave$.pipe(
  mergeMap(saveChanges),tap(_ => savesInProgress--),// ignore if additional saves are in progress
  filter(_ => !savesInProgress),mapTo(
    concat(
      // display saved for 2s
      of('Saved!'),empty().pipe(delay(2000)),// then last updated time,defer for proper time
      defer(() => of(`Last updated: ${format(Date.Now(),'MM/DD/YYYY hh:mm')}`))
    )
  )
);
​
merge(savesInProgress$,savesCompleted$)
  .pipe(
    /*
   If new save comes in when our completion observable is running,we want to switch to it for a status update.
  */
    switchAll()
  )
  .subscribe(status => {
    saveIndicator.innerHTML = status;
  });

以及可以找到源代码的链接：https://www.learnrxjs.io/learn-rxjs/recipes/save-indicator

我想知道为什么这里需要share()多播运算符。我尝试将其删除，但应用程序的行为没有改变。

有人可以解释为什么在这里需要share()运算符吗？

编辑：也请记住，只有一个订阅/订阅。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）