LeetCode-OpenSource/rxjs-hooks

Question: How to trigger the useObservable programmatically/manually?

jeffreys-cat opened this issue · 2 comments

I want to fetch data when the app was initiated and then click a button to refetch data.

Example: https://stackblitz.com/edit/rxjs-hooks-question

You should think this question in Reactive way.

Pseudocode here:

const [eventCallback, status] = useEventCallback((event$: Observable<React.MouseEvent<HTMLButtonElement>>) =>
  event$.pipe(
    startWith(null),
    tap(() => {
      setLoading(true)
      setError(null)
    }),
    switchMap(() => mockRequest()),
    tap(() => {
      setLoading(false);
    }),
    catchError(error => {
      setError(error);
      setLoading(false);
      return of("got error");
    }),
  ),
'nothing')

const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  const ok = confirm("are you sure about that?");
  if (ok) {
    eventCallback(e)
    console.log('ok');
    // how to refetch data here...
  }
}

return (
  <div className="App">
    <p>
      {isLoading ? "is loading!...." : `${status}`}
      {error && ` - ${error.toString()}`}
    </p>
    <button onClick={onClick}>send request</button>
  </div>
);

Got it, thank you!! @Brooooooklyn