Cancel request using redux observable is not working
I'm trying to add in canceling in my request using redux-observable. Trying to implement a simple login example. Currently, I am unable to submit the login request again after I added the cancelation.
const loginUserApiCall = (username, password) => {
return new Promise((resolve, reject) => {
if (username === "foo" && password === "foo") {
resolve({
user: { name: "foo", lastName: "fooLName", email: "foo@gmail.com" }
});
}
reject({ err: "Creds are incorrect" });
});
};
const loginRequestEpic = (action$, state$) =>
action$.pipe(
ofType(LOGIN_REQUEST),
mergeMap(action => {
const { username, password } = action.payload;
return loginUserApiCall(username, password);
}),
mergeMap(res => of(loginSuccess(res))),
takeUntil(action$.pipe(ofType(LOGIN_CANCELLED))),
catchError(err => {
return of(loginFailure(err))
})
);
What am I doing wrong as cancelation is not happening and I can't retry a request after canceling it? Once user cancels I should be able to retry again.
javascript rxjs middleware redux-observable side-effects
asked Nov 27 '18 at 21:55
fscorefscore
1,22422351
add a comment |
I'm trying to add in canceling in my request using redux-observable. Trying to implement a simple login example. Currently, I am unable to submit the login request again after I added the cancelation.
const loginUserApiCall = (username, password) => {
return new Promise((resolve, reject) => {
if (username === "foo" && password === "foo") {
resolve({
user: { name: "foo", lastName: "fooLName", email: "foo@gmail.com" }
});
}
reject({ err: "Creds are incorrect" });
});
};
const loginRequestEpic = (action$, state$) =>
action$.pipe(
ofType(LOGIN_REQUEST),
mergeMap(action => {
const { username, password } = action.payload;
return loginUserApiCall(username, password);
}),
mergeMap(res => of(loginSuccess(res))),
takeUntil(action$.pipe(ofType(LOGIN_CANCELLED))),
catchError(err => {
return of(loginFailure(err))
})
);
What am I doing wrong as cancelation is not happening and I can't retry a request after canceling it? Once user cancels I should be able to retry again.
javascript rxjs middleware redux-observable side-effects
asked Nov 27 '18 at 21:55
fscorefscore
1,22422351
use switchMap, so that the previous request will be cancelled automatically when a second LOGIN_REQUEST action is fired.
– Praveen
Dec 11 '18 at 7:28
add a comment |
I'm trying to add in canceling in my request using redux-observable. Trying to implement a simple login example. Currently, I am unable to submit the login request again after I added the cancelation.
const loginUserApiCall = (username, password) => {
return new Promise((resolve, reject) => {
if (username === "foo" && password === "foo") {
resolve({
user: { name: "foo", lastName: "fooLName", email: "foo@gmail.com" }
});
}
reject({ err: "Creds are incorrect" });
});
};
const loginRequestEpic = (action$, state$) =>
action$.pipe(
ofType(LOGIN_REQUEST),
mergeMap(action => {
const { username, password } = action.payload;
return loginUserApiCall(username, password);
}),
mergeMap(res => of(loginSuccess(res))),
takeUntil(action$.pipe(ofType(LOGIN_CANCELLED))),
catchError(err => {
return of(loginFailure(err))
})
);
What am I doing wrong as cancelation is not happening and I can't retry a request after canceling it? Once user cancels I should be able to retry again.
javascript rxjs middleware redux-observable side-effects
asked Nov 27 '18 at 21:55
fscorefscore
1,22422351
I'm trying to add in canceling in my request using redux-observable. Trying to implement a simple login example. Currently, I am unable to submit the login request again after I added the cancelation.
const loginUserApiCall = (username, password) => {
return new Promise((resolve, reject) => {
if (username === "foo" && password === "foo") {
resolve({
user: { name: "foo", lastName: "fooLName", email: "foo@gmail.com" }
});
}
reject({ err: "Creds are incorrect" });
});
};
const loginRequestEpic = (action$, state$) =>
action$.pipe(
ofType(LOGIN_REQUEST),
mergeMap(action => {
const { username, password } = action.payload;
return loginUserApiCall(username, password);
}),
mergeMap(res => of(loginSuccess(res))),
takeUntil(action$.pipe(ofType(LOGIN_CANCELLED))),
catchError(err => {
return of(loginFailure(err))
})
);
What am I doing wrong as cancelation is not happening and I can't retry a request after canceling it? Once user cancels I should be able to retry again.
javascript rxjs middleware redux-observable side-effects
javascript rxjs middleware redux-observable side-effects
asked Nov 27 '18 at 21:55
fscorefscore
1,22422351
asked Nov 27 '18 at 21:55
fscorefscore
1,22422351
asked Nov 27 '18 at 21:55
fscorefscore
1,22422351
asked Nov 27 '18 at 21:55
fscorefscore
1,22422351
asked Nov 27 '18 at 21:55
fscorefscore
1,22422351
1,22422351
use switchMap, so that the previous request will be cancelled automatically when a second LOGIN_REQUEST action is fired.
– Praveen
Dec 11 '18 at 7:28
add a comment |
use switchMap, so that the previous request will be cancelled automatically when a second LOGIN_REQUEST action is fired.
– Praveen
Dec 11 '18 at 7:28
use switchMap, so that the previous request will be cancelled automatically when a second LOGIN_REQUEST action is fired.
– Praveen
Dec 11 '18 at 7:28
use switchMap, so that the previous request will be cancelled automatically when a second LOGIN_REQUEST action is fired.
– Praveen
Dec 11 '18 at 7:28
add a comment |
1 Answer
1
active
oldest
votes
Once takeUntil is executed it'll complete your observable, so is when there are error thrown and the whole stream is deactivated. You can add repeat operator to the end
action$.pipe(
ofType(LOGIN_REQUEST),
mergeMap(action => {
const { username, password } = action.payload;
return loginUserApiCall(username, password);
}),
mergeMap(res => of(loginSuccess(res))),
takeUntil(action$.pipe(ofType(LOGIN_CANCELLED))),
catchError(err => {
return of(loginFailure(err))
}),
repeat()
);
answered Nov 27 '18 at 22:29
Fan CheungFan Cheung
2,8171418
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53508804%2fcancel-request-using-redux-observable-is-not-working%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Once takeUntil is executed it'll complete your observable, so is when there are error thrown and the whole stream is deactivated. You can add repeat operator to the end
action$.pipe(
ofType(LOGIN_REQUEST),
mergeMap(action => {
const { username, password } = action.payload;
return loginUserApiCall(username, password);
}),
mergeMap(res => of(loginSuccess(res))),
takeUntil(action$.pipe(ofType(LOGIN_CANCELLED))),
catchError(err => {
return of(loginFailure(err))
}),
repeat()
);
answered Nov 27 '18 at 22:29
Fan CheungFan Cheung
2,8171418
add a comment |
Once takeUntil is executed it'll complete your observable, so is when there are error thrown and the whole stream is deactivated. You can add repeat operator to the end
action$.pipe(
ofType(LOGIN_REQUEST),
mergeMap(action => {
const { username, password } = action.payload;
return loginUserApiCall(username, password);
}),
mergeMap(res => of(loginSuccess(res))),
takeUntil(action$.pipe(ofType(LOGIN_CANCELLED))),
catchError(err => {
return of(loginFailure(err))
}),
repeat()
);
answered Nov 27 '18 at 22:29
Fan CheungFan Cheung
2,8171418
add a comment |
Once takeUntil is executed it'll complete your observable, so is when there are error thrown and the whole stream is deactivated. You can add repeat operator to the end
action$.pipe(
ofType(LOGIN_REQUEST),
mergeMap(action => {
const { username, password } = action.payload;
return loginUserApiCall(username, password);
}),
mergeMap(res => of(loginSuccess(res))),
takeUntil(action$.pipe(ofType(LOGIN_CANCELLED))),
catchError(err => {
return of(loginFailure(err))
}),
repeat()
);
answered Nov 27 '18 at 22:29
Fan CheungFan Cheung
2,8171418
Once takeUntil is executed it'll complete your observable, so is when there are error thrown and the whole stream is deactivated. You can add repeat operator to the end
action$.pipe(
ofType(LOGIN_REQUEST),
mergeMap(action => {
const { username, password } = action.payload;
return loginUserApiCall(username, password);
}),
mergeMap(res => of(loginSuccess(res))),
takeUntil(action$.pipe(ofType(LOGIN_CANCELLED))),
catchError(err => {
return of(loginFailure(err))
}),
repeat()
);
answered Nov 27 '18 at 22:29
Fan CheungFan Cheung
2,8171418
answered Nov 27 '18 at 22:29
Fan CheungFan Cheung
2,8171418
answered Nov 27 '18 at 22:29
Fan CheungFan Cheung
2,8171418
answered Nov 27 '18 at 22:29
Fan CheungFan Cheung
2,8171418
2,8171418
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53508804%2fcancel-request-using-redux-observable-is-not-working%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
use switchMap, so that the previous request will be cancelled automatically when a second LOGIN_REQUEST action is fired.
– Praveen
Dec 11 '18 at 7:28