usePrefetchRoute proposal

usePrefetchRoute.js

// @flow
import { useCallback } from 'react';
import { useDispatch } from 'react-redux';
import * as routePaths from '~/constants/routes';
import { GET_SMART_CHARGING } from '~/state/products/ev-charger/actions';

const ROUTES_PREFETCH_ACTIONS = {
    [routePaths.evChargerSettings]: {
        type: GET_SMART_CHARGING,
        routeArgsToActionPayload: ({ id, ...restOfNavigationArguments }) => ({ deviceId: id }),
    },
};

export function usePrefetchRoute(route: string, passProps?: Object, options?: Object) {
    const dispatch = useDispatch();
    const { type, routeArgsToPayload } = ROUTES_PREFETCH_ACTIONS[route];
    const payload = routeArgsToPayload(passProps);

    return useCallback(() => {
        dispatch({ type, payload });
    }, [dispatch, payload, type]);
}

////////////////////////////////////////////////////////////////////////

// Usage example: on any screen previous to the target one where we'll need the data to be available:
const prefetchMyRoute = usePrefetchRoute(routePaths.evChargerSettings, { id: 'example-id' });
prefetchMyRoute();