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.
