Observables-hooks 如何仅在点击时订阅
Observables-hooks How to to subscribe only on click
我是一名 angular 开发人员,刚接触 React。我使用 observables 来管理我所有的状态,因为这是我所熟悉的。我正在尝试找出编写自定义可观察挂钩的最佳方法,该挂钩仅在用户单击按钮时订阅
我正在尝试实现这样的东西:
const addMovieHandler = useCallback((movie) => {
setIsLoading(true);
addMovie$(movie).subscribe((data) => {
console.log(data);
fetchMovies()
});
}, [fetchMovies]);
它有效,但它看起来很笨拙,我不知道将取消订阅放在哪里
您可以使用 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>
我是一名 angular 开发人员,刚接触 React。我使用 observables 来管理我所有的状态,因为这是我所熟悉的。我正在尝试找出编写自定义可观察挂钩的最佳方法,该挂钩仅在用户单击按钮时订阅
我正在尝试实现这样的东西:
const addMovieHandler = useCallback((movie) => {
setIsLoading(true);
addMovie$(movie).subscribe((data) => {
console.log(data);
fetchMovies()
});
}, [fetchMovies]);
它有效,但它看起来很笨拙,我不知道将取消订阅放在哪里
您可以使用 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>