Observables-hooks如何在点击时订阅

Question

我是一个刚接触React的angular开发者。我使用可观察对象来管理我的所有状态，因为这是我所熟悉的。我试图找出最好的方法来编写一个自定义的可观察钩子，只有订阅当用户点击一个按钮

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

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

它工作，但它似乎hacky，我不知道在哪里放退订

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>