Observables-hooks 如何仅在点击时订阅

Question

我是一名 angular 开发人员，刚接触 React。我使用 observables 来管理我所有的状态，因为这是我所熟悉的。我正在尝试找出编写自定义可观察挂钩的最佳方法，该挂钩仅在用户单击按钮时订阅

我正在尝试实现这样的东西：

const addMovieHandler = useCallback((movie) => {
setIsLoading(true);
addMovie$(movie).subscribe((data) => {
  console.log(data);
  fetchMovies()
});
 }, [fetchMovies]);

它有效，但它看起来很笨拙，我不知道将取消订阅放在哪里

Answer 1

您可以使用 Subject 作为事件发射器并在 useEffect() 中订阅它 - 卸载时类似于 componentDidMount 和 unsubscribe() 以避免内存泄漏。应使用 useRef()，以便在整个组件生命周期中始终存在 一个主题实例

const onAddMovie=useRef(new Subject).current

// Similar to angular OnNgInit 
useEffect(()=>{
   const sub=>onAddMovie.pipe(
     switchMap(()=>fetchMovies())
     tap(()=>... side effect like setState)
   ).subscribe()
   return ()=>sub.unsubscribe()

},[])

<Button click={()=>onAddMovie.next()}> add movie </Button>

Observables-hooks 如何仅在点击时订阅

Observables-hooks How to to subscribe only on click

reactjs

react-hooks

rxjs

observable

react-custom-hooks