Keeping track of asyncronous calls with reducer

hooks_async_reducer.js

import React, { useReducer } from 'react';

const config = [
  () => ({ loading: true }),
  (data) => ({ loading: false, data }),
  (error) => ({ loading: false, error }),
];

const asyncReducer = (_, { type, payload }) => config[type](payload);

export const useAsync = (fn, ...args) => {
  const [state, _dispatch] = useReducer(asyncReducer, { 
    loading: false,
  });

  const dispatch = () => {
    _dispatch({ type: 0 });
    Promise.resolve(fn(...args))
      .then((payload) => _dispatch({ type: 1, payload }))
      .catch((e) => _dispatch({ type: 2, payload: e }));
  }

  return {
    dispatch,
    ...state,
  };
};