Redux AJAX request examples

redux-ajax-request-examples.js

// Option 1: a thunk action creator using redux-thunk middleware
function myThunkActionCreator(someValue) {
    return (dispatch, getState) => {
        dispatch({type : "REQUEST_STARTED"});

        myAjaxLib.post("/someEndpoint", {data : someValue})
            .then(
                // Use the (resolve, reject) form of .then() instead of .catch(),
                // so that we don't accidentally dispatch REQUEST_FAILED on a reducer error
                response => dispatch({type : "REQUEST_SUCCEEDED", payload : response}),
                error => dispatch({type : "REQUEST_FAILED", error : error})
            ).  
    };
}

// Option 2: a generator function that listens for a "MAKE_AJAX_CALL" action, using redux-saga middleware
function* myNetworkRequestSaga() {
    while(true) {
        const action = yield take("MAKE_AJAX_CALL");
        const data = action.someValue;

        yield put({type : "REQUEST_STARTED");

        try {
            const response = yield call(myAjaxLib.post, "/someEndpoint", {data}
            yield put({type : "REQUEST_SUCCEEDED", payload : response});
        }
        catch(error) {
            yield put({type : "REQUEST_FAILED", error});
        }        
    }
}

// Option 3: a function that dispatches a "MAKE_AJAX_CALL" action, with a custom network request middleware
function requestAjaxCallFromMiddleware(someValue) {
    return {
        type : "MAKE_AJAX_CALL", 
        payload : {
            requestType : "POST",
            endpoint : "/someEndpoint",
            data : someValue
        }
    };
}