Возникли проблемы при создании функции-оболочки для вызовов API

Question

Итак, по сути, у меня есть шаблон, который я хотел бы использовать в своих вызовах API. По сути, это блок try catch finally, в который я отправляю серию действий. Вместо того, чтобы копировать и вставлять этот шаблон повсюду, я хотел бы создать функцию-обертку, в которой все, что я передаю, это необходимые параметры, API-функции и действия диспетчеризации.

Моя функция блокировки вызова try выглядит следующим образом:

export function getTokenAPI(username, password) {
  return async function action(dispatch) {
    try {

      dispatch(loadingActions.loadingInProgress(true));


      const { data } = await API.authGetToken(username, password);
      const { success } = data;

      console.log('get token api data', data);
      if (success) {


        dispatch(setData(data));

        dispatch(setTokenSuccess());
      } else if (!success) {
        const { errorMessage } = data;
        throw Error(errorMessage || 'You broke it, not my fault');
      }
    } catch (e) {
      dispatch(errorActions.addError(e.message));
      dispatch(errorActions.removeError());
    } finally {
      dispatch(loadingActions.loadingInProgress(false));
    }
  };
}

Итак, оболочка, которую я пытался создать, выглядит следующим образом:

function wrapper(apiFunction, dispatchAction) {
  return async function action(dispatch) {
    try {
      dispatch(loadingActions.loadingInProgress(true));
      const { data } = await apiFunction(arg1, arg2);
      const { success } = data;
      if (success) {
        dispatch(dispatchAction(data));
      } else if (!success) {
        const { errorMessage } = data;
        throw Error(errorMessage || 'meh');
      }
    } catch (e) {
      dispatch(errorActions.addError(e.message));
      dispatch(errorActions.removeError());
    } finally {
      dispatch(loadingActions.loadingInProgress(false));
    }
  };
}

С этим я в конечном итоге могу просто запустить

wrapper(apiFunction(username, password), setData)

, но я получаюTypeError Cannot read property type of undefined. Мне интересно, правильно ли я иду по этому поводу.

Есть предложения или рекомендации?

Answer 1

wrapper - это high order function, который ожидает два аргумента apiFunction и dispatchAction и return и action creator, который ожидает действие и должен быть заключен в экземпляр dispatch. Таким образом, вы должны использовать wrapper, как это

const Component = () =>{
    const dispatch = useDispatch()

    const onSubmit = () =>{
        dispatch(wrapper(apiFunction, dispatchAction)(action))
    }
}

wrapper(apiFunction, dispatchAction) вычисляет другую функцию, которая ожидает аргумент action и должна быть явно выполнена. Является эквивалентом

const onSubmit = () =>{
    const actionCreator = wrapper(apiFunction, dispatchAction)
    dispatch(actionCreator(action))
}

Answer 2

Так что я исправил это, отредактировав мою обертку немного больше и используя ответ Дюпокаса как вдохновение (необходимо использовать диспетчеризацию).

Вот мой упаковщик и вот как я его использую:

apiWrapper

import { loadingActions } from '_ducks/loading';
import { errorActions } from '_ducks/error';
import { Platform } from 'react-native';

const os = Platform === 'ios' ? 'iPhone' : 'Android';

const { loadingInProgress } = loadingActions;
const { addError, removeError } = errorActions;

export default function apiWrapper(
  apiFunction,
  dispatchActionData,
  dispatchActionStatus,
) {
  return async function action(dispatch) {
    try {
      dispatch(loadingInProgress(true));
      const { data } = await apiFunction;
      const { success } = data;
      console.log('D A T A', data);

      if (success) {
        dispatchActionData && dispatch(dispatchActionData(data));
        dispatchActionStatus && dispatch(dispatchActionStatus());
      } else if (!success) {
        const { errorMessage } = data;
        throw Error(
          errorMessage || `Sounds like a problem with your ${os} device`,
        );
      }
    } catch (e) {
      dispatch(addError(e.message));
      dispatch(removeError());
    } finally {
      dispatch(loadingInProgress(false));
    }
  };
}

apiWrapper use

export function submitLogIn(username, password) {
  return function action(dispatch) {
    dispatch(
      apiWrapper(
        API.getSTUFF(username, password),
        setUserData,
        setTokenSuccess,
      ),
    );
  };
}