mutoid/react/useFetchReaderObservableResource.js

Reactive library for data fetching, caching, state management

import { useCallback, useState, useRef, useEffect } from 'react';
import { takeUntil } from 'rxjs/operators';
import * as RES from '../http/Resource';
import { useSubscriptionRef } from './useSubscriptionRef';
export function useFetchReaderObservableResource(fetch, deps, options) {
    const [value, setValue] = useState(options?.iniState ?? RES.init);
    const [subscriptionRef, subscriptionUnsubscribe] = useSubscriptionRef();
    const fetchRef = useRef(fetch);
    const depsRef = useRef(deps);
    const optionsRef = useRef(options);
    useEffect(() => {
        fetchRef.current = fetch;
        depsRef.current = deps;
        optionsRef.current = options;
    }, [fetch, deps, options]);
    const dispatch = useCallback((...p) => {
        subscriptionUnsubscribe();
        const resource$ = fetchRef.current(...p)(depsRef.current);
        const resourceTaken$ = optionsRef.current?.notifierTakeUntil
            ? resource$.pipe(takeUntil(optionsRef.current.notifierTakeUntil))
            : resource$;
        subscriptionRef.current = resourceTaken$.subscribe(setValue);
    }, [subscriptionRef, subscriptionUnsubscribe]);
    const resetState = useCallback(() => {
        setValue(optionsRef.current?.iniState ?? RES.init);
    }, []);
    return [value, dispatch, resetState];
}