Question: Guidance for async effects?

Our team is currently using redux-loop for handling asynchronous side-effects kicked off by our reducer. We’re really excited about use-methods, and we’re trying to figure out if there’s any guidance on how to initiate async calls and have those trigger state updates when they complete.

cc @alexburner

[pelotom]

Hey @TedDriggs, if all you’re doing is initiating a single fetch on component mount, this is straightforward to do with just useEffect:

const [state, { receiveData }] = useMethods(methods, initialState);

useEffect(() => {
  let alive = true;
  fetchData().then(data => alive && receiveData(data));
  return () => { alive = false; };
}, []);

If you might want to fetch multiple times in the course of the life of the component it gets more complicated, and you probably want to do things like debouncing. There are a lot of interesting hook-based solutions emerging for managing async flows; it’s very early for this space and I think it’s an open question what the right direction is, or whether there will ever be a one-size-fits-all answer to the problem. I’d recommend browsing through here: https://nikgraf.github.io/react-hooks/

useMethods is really only concerned with solving one problem well, which is managing synchronous state. Whatever async solutions you arrive at, useMethods should work well with them 😄

[ja0nz]

useMethods is very pluggable. Async effects can be modeled like normal methods. In my implementation I use a wrapper to create async methods:

const withAsync = ([states, methods]) => {
    const { receiveData } = methods;
    return [
        states,
        {
            ...methods,
            async fetchData() {
                const data = await fetch();
                receiveData(data);
            }
        }
    ]
};

const [
    { data }, // <- latest state
    { receiveData, fetchData }, // <- callbacks for modifying state
] = withAsync(useMethods(methods, initialState));