React Redux Saga: weird behaviour when calling API

Question

I'm using sagas in the React/Redux project I'm working on. It's a form to create and edit content. The form is working fine to create the content, but it's not in the edit.

The API call to the endpoint returns in both cases. With the same status (200) and the data is almost the same. Adding some console.log I realized that in the creation it reaches the line you'll see below, but in the editing, it doesn't. That's my only problem and I can't understand why. Code below:

export function* performMarcFormActions(action) {

    try {
        const state = yield select();
        const token = state.getIn(['account', 'token']);
        const locale = state.getIn(['language', 'locale']);

        switch (action.type) {
            case constants.MARC_LOAD_NOTICE: {

                console.log('MARC_LOAD_NOTICE SAGA');
                const { instanceId, marcType, resourceType, version } = action;
                
                // the api call. The endpoint returns fine in both cases
                const resp = yield api.fetchMarc(token, instanceId, marcType, resourceType, version);
                console.log('---------------------->>>>>>>>>>>>>>>>>>>', resp); // This line is not reached in the editing

                // code removed for simplicity

                yield put(actions.loadMarcFormSuccess(resp.model, resp.model.listsMap, formFixedFields, formDynamicFields, worksheetFieldsMap, modelFixedFields, modelDynamicFields));

                break;
            }            
            default: {
                console.log(`Action Type Unrecognized in marcSaga.js => ${action.type}`);
                break;
            }
        }
    }
    catch (err) {
        const errorMessage = (err && typeof err === 'object' && err.message) ? err.message : JSON.stringify(err);
        console.log(`Error occurred in marcSaga.js => ${errorMessage}`);
        yield put(globalActions.showError(errorMessage));
    }

    return undefined;
}


export default function* marcFormSaga() {
    yield* takeLatest([
        constants.MARC_LOAD_NOTICE,
        constants.MARC_LOAD_WORKSHEET,
    ], performMarcFormActions);
}

As I said, looking at the network tab in the browser I see the request fired and returned in both cases. But in the editing, the console.log in the line just below it is not reached.

What could be causing this?

Answer 1

Calls to APIs and other external functions need to be done using the call effect. The first argument is the function and the remaining arguments are the args of that function.

const { instanceId, marcType, resourceType, version } = action;
const resp = yield call(api.fetchMarc, token, instanceId, marcType, resourceType, version);
console.log('---------------------->>>>>>>>>>>>>>>>>>>', resp);