Redux-sagas doesn't recognize function from backend.js file

Question

I have the following redux-sagas:

import { all, call, fork, put, takeEvery } from "redux-saga/effects";
import { catalogs } from 'backend/Catalogs';
import {
  ON_FETCH_CATALOGS,
  ON_CRUD_POPULATE_LIST,
  ON_CRUD_FETCH_NEXT_PAGE,
  ON_CRUD_FETCH_PREVIOUS_PAGE,
  ON_CRUD_FETCH_PAGE,
  ON_CRUD_CREATE,
  ON_CRUD_DELETE,
  ON_CRUD_REFRESH_PAGE,
  ON_CATALOG_POPULATE_OPTIONS,
  ON_CRUD_UPDATE,
  ON_CRUD_FETCH_LIST,
  ON_CRUD_FETCH_RECORD,
  GET_TAGS,
  ON_FETCH_AUTOMATS,
} from "constants/ActionTypes";
import {
  fetchCatalogsSuccess,
  showCatalogsMessage,
  crudPopulateListSuccess,
  crudFetchNextPageSuccess,
  crudFetchPreviousPageSuccess,
  crudFetchPageSuccess,
  crudRefreshPage,
  crudRefreshPageSuccess,
  catalogPopulateOptionsSuccess,
  crudFetchListSuccess,
  crudFetchRecordSuccess,
  ListTagsSuccess,
  fetchAutomatsSuccess,
} from 'actions/Catalogs';
import { ALERT_ERROR ,ALERT_SUCCESS } from 'attractora/AttrAlert';


...


/// fetchAutomats

const fetchAutomatsRequest = async () => {
  return await catalogs.fetchAutomats()
    .then (automats => automats)
    .catch (error => error)
}

function* fetchAutomatsFromRequest ({payload}) {
  try {
    const automats = yield call(fetchAutomatsRequest);
    if (automats.message) {
      yield put(showCatalogsMessage(ALERT_ERROR, automats.message));
    } else {
      yield put(fetchAutomatsSuccess(automats));
    }
  } catch (error) {
    yield put(showCatalogsMessage(ALERT_ERROR, error));
  }
}

export function* fetchAutomats() {
  yield takeEvery(ON_FETCH_AUTOMATS, fetchAutomatsFromRequest);
}

/// rootSaga

export default function* rootSaga() {
  yield all([
    fork(fetchCatalogsList),
    fork(crudPopulateList),
    fork(crudFetchNextPage),
    fork(crudFetchPreviousPage),
    fork(crudFetchPage),
    fork(crudCreateRecord),
    fork(crudUpdateRecord),
    fork(crudDeleteRecord),
    fork(crudSagaRefreshPage),
    fork(catalogPopulateOptions),
    fork(crudFetchList),
    fork(crudFetchRecord),
    fork(crudPopulateListTags),
    fork(fetchAutomats),
  ]);
}

And this backend.js file:

export const fetchAutomats = () => {
  var requestString = backendServer + 'api/general/automats_for_form/'

  axios.get(requestString, getAuthHeader())
    .then((Response) => {
      return { automats: Response.data, message: null };
    })
    .catch((Error) => {
      return getErrorMessage(Error);
    })
}

export const catalogs = {
  getCatalogs: getCatalogs,
  populateList: populateList,
  fetchNextPage: fetchNextPage,
  fetchPreviousPage: fetchPreviousPage,
  fetchPage: fetchPage,
  createRecord: createRecord,
  deleteRecord: deleteRecord,
  refreshPage: refreshPage,
  getList: getList,
  updateRecord: updateRecord,
  fetchList: fetchList,
  fetchRecord: fetchRecord,
  populateListTags: populateListTags,
  fetchAutomats: fetchAutomats,
  searchRepositoryByName,
};

For some reason, line return await catalogs.fetchAutomats() rises the following error: TypeError: Cannot read property 'then' of undefined at fetchAutomatsRequest.

I cannot find where my error lies.

Answer 1

The issue is within the fetchAutomats method, you need to return the promise from the method:

export const fetchAutomats = () => {
  var requestString = backendServer + 'api/general/automats_for_form/'

  return axios.get(requestString, getAuthHeader())
    .then((Response) => {
      return { automats: Response.data, message: null };
    })
    .catch((Error) => {
      return getErrorMessage(Error);
    })
}