stelioschar
stelioschar

Reputation: 115

RxJS - ajax.delete keeps retrying until the observable fails while DELETE request was 200 OK

I'm facing some issues with ajax.delete. I'm running the code below where a DELETE request from ajax is being done and if the first fails, it keeps retrying until the request is successful.

let RetryStrategy = attempts => attempts
    .zip(Observable.range(1, 4))
    .flatMap(([error, i]) => {
        if (i > 3) {
            return Observable.throw('Network error occured')
        }
        return Observable.timer(i * 1000)
    })

export const deleteSurveyQuestionEpic = (action$, {getState, dispatch}) =>
    action$.ofType('MY_ACTION')
        .switchMap(
            action => ajax.delete(`myURL`)
                .map(res => res.response)
                .flatMap(response => {
                    console.log(response) // <-- returns null
                    return arrayRemove('formName', 'questions', 1) // <-- redux-form action-creator
                })
                .retryWhen(RetryStrategy)
                .takeUntil(action$.ofType('MY_CANCEL_ACTION'))
                .catch((e) => {
                    return Observable.of(
                        errorSurvey((e.xhr && `Error ${e.xhr.statusText}: ${e.xhr.statusText}`) || 'Network error occured')
                    )
                })
        )

The problem is that in the network tab I see that the DELETE request returns 200 - OK but the ajax.delete understands it as an error.

While looking for this issue i found this comment where @jayphelps is wondering if the browser makes a CORS request.

This is the case for me, while browser before each network request it makes a CORS request and after that it makes the regular request.

I'm confused and I'm not sure if this is an issue that is caused by the CORS process or I'm missing something in my implementation, once the PUT and GET requests work fine.

NOTE: I tried to add play with ajax.delete's crossDomain option, but I didn't manage to solve my issue.


Solved

The problem was pretty easy to solve. I didn't return an Observable from flatMap. RxJS operators must return an observable.

.flatMap(response => {
    console.log(response) // <-- returns null
    // An Observable needs to be returned instead of redux action creator
    return arrayRemove('formName', 'questions', 1) 
})

I also made this test where I implemented a simple RxJS process without the redux-observable implementation. This example contains the case where multiple redux actions-creators are being called.

Upvotes: 1

Views: 212

Answers (0)

Related Questions