posts/encapsulate_as_much_state_as_possible

[utterances-bot]

Encapsulate as much state as possible in your component

A common pattern I see is passing every bit of a component's state in as a prop. This just puts the responsibility of that component's actual useful logic on to the parent.

https://blacksheepcode.com/posts/encapsulate_as_much_state_as_possible

[mikhail-molchanov]

Hey. Thanks for the article. A question though. What if I had to reuse the same "better" button from your examples with something like Redux store, where we only have just "loading" state variable available and no promises?

[dwjohnston]

@mikhail-molchanov Thanks for getting in touch.

If you were using RTKQ you could use useLazyQuery

But if you were using plain redux or some other bespoke 'flat state' type solution - you would have to write a helper function to convert it from the flat state, into an async function.

Something like this:

//nb. this type assumes that the data is reset when it starts loading again. 
// Not necessarily the case. 
type LoadingState<T> = {
    status: "loading";
    data: null;
} | {
    status: "error";
    data: null;
} | {
    status: "success";
    data: T;
} | {
    status: "pending";
    data: null;
};

type ErrorOrSuccessStateOnly<T> = {
    status: "error";
    data: null;
} | {
    status: "success";
    data: T;
};

export function useAsyncFunctionFromFlatState<TArgs extends unknown[], TResult>(
    trigger: (...args: TArgs) => void,
    state: LoadingState<TResult>
): (...args: TArgs) => Promise<ErrorOrSuccessStateOnly<TResult>> {

    const promiseRef = useRef<PromiseWithResolvers<ErrorOrSuccessStateOnly<TResult>>>(null)

    const asyncFunction = useCallback((...args: TArgs) => {

        // Each trigger of the function will create a new promise
        promiseRef.current = Promise.withResolvers();
        // Retrigger the upstream
        trigger(...args);

        // Return the promise
        return promiseRef.current.promise;
    }, [trigger])

    // When the flat state changes 
    // Then resolve the promise as is appropriate
    useEffect(() => {
        switch (state.status) {
            case "pending":
            case "loading": {
                // Do nothing
                return;
            }
            case "error": {
                promiseRef.current?.resolve({
                    status: "error",
                    data: null
                })
                break;
            }
            case "success": {
                promiseRef.current?.resolve({
                    status: "success",
                    data: state.data,
                })
            }

           // depending on how much you trust your source state, you might want a timeout to reject the promise if it doesn't resolve in a timely manner. 
        }
    }, [state])

    return asyncFunction;
}

Example https://github.com/dwjohnston/flat-state-to-async-promise/tree/main