React hook like useReducer but can update state asynchronously

use-async-reducer-example.jsx

// useAsyncReducer works like useReducer, except the reducer has access to the dispatch function
// so it can change state after async operations complete

// example usage:

import useAsyncReducer from './use-async-reducer';

function reducer(state, dispatch, action, args) {
  switch (action) {
    case 'fetch':
      return [
        state,
        fetch(args.url).then((fetched) => { dispatch('processFetch', { fetched }); return fetched }),
      ];
    case 'processFetch':
     return [{ ...state, ...processFetch(args.fetched) }];
    default:
      return [state];
  }
}

function FetchingComponent({ url, initialState }) {
  const [state, dispatch] = useAsyncReducer(initialState);
  
  useEffect(() => {
    dispatch('fetch', url);
  }, [url]);
  
  return <AmazingDataView data={state}/>;
}

use-async-reducer.ts

// useAsyncReducer works like useReducer, except the reducer has access to the dispatch function
// so it can change state after async operations complete

import { useCallback, useState } from 'react';

// dispatch returns the promise returned by the reducer, if any (otherwise returns Promise.resolve())
type AsyncDispatcher<Action> = (action: Action, ...args: any[]) => Promise<any>;

type AsyncReducer<State, Action> = (
  state: State,
  redispatch: AsyncDispatcher<Action>, // redispatch to change state after async completes
  action: Action,
  ...args: any[] // use as many arguments as you like
) => [State, Promise<any>?]; // if the reducer return a promise, it will passed on by dispatch()

function useAsyncReducer<State, Action>(
  reducer: AsyncReducer<State, Action>,
  initialState: State
) {
  const [state, setState] = useState(initialState);
  const dispatch: AsyncDispatcher<Action> = useCallback(
    (action, ...args) =>
      new Promise((resolve, reject) => {
        setState((prevState) => {
          const [nextState, _promise] = reducer(
            prevState,
            dispatch,
            action,
            ...args
          );
          (_promise || Promise.resolve()).then(resolve).catch(reject);
          return nextState;
        });
      }),
    [reducer]
  );
  return [state, dispatch];
}

export default useAsyncReducer;