Redirect to Created Post after Create Post Saga
I have a blog where you can create a post, that works fine. What I want to do is redirect to the newly created post after creation.
postActions.js:
export function* watchCreatePost() {
yield takeEvery(CREATE_POST, createPostSaga);
}
function* createPostSaga(action) {
const token = yield select(selectToken);
const headerParams = {
Authorization: `JWT ${token}`
};
const apiCall = () => {
let formData = new FormData();
formData.append("title", action.payload.title);
formData.append("content", action.payload.content);
formData.append("thumbnail", action.payload.thumbnail);
formData.append("tags", action.payload.tags);
formData.append("slug", generateSlug(action.payload.title));
return axios({
method: "post",
url: "/posts/",
data: formData,
headers: headerParams
})
.then(response => response.data)
.catch(err => {
throw err;
});
};
try {
const response = yield call(apiCall);
const post = {};
post[response.id] = { ...response };
yield put({ type: ADD_POST, payload: response });
} catch (error) {
console.log(error);
}
}
Like I said this creates the post fine, but I am unsure on how to redirect after it completes. I know in redux-thunk you can use .then() but not an option as far as I can tell with redux-saga.
reactjs redux react-router redux-saga
asked Nov 15 '18 at 18:03
CHBresserCHBresser
627
add a comment |
I have a blog where you can create a post, that works fine. What I want to do is redirect to the newly created post after creation.
postActions.js:
export function* watchCreatePost() {
yield takeEvery(CREATE_POST, createPostSaga);
}
function* createPostSaga(action) {
const token = yield select(selectToken);
const headerParams = {
Authorization: `JWT ${token}`
};
const apiCall = () => {
let formData = new FormData();
formData.append("title", action.payload.title);
formData.append("content", action.payload.content);
formData.append("thumbnail", action.payload.thumbnail);
formData.append("tags", action.payload.tags);
formData.append("slug", generateSlug(action.payload.title));
return axios({
method: "post",
url: "/posts/",
data: formData,
headers: headerParams
})
.then(response => response.data)
.catch(err => {
throw err;
});
};
try {
const response = yield call(apiCall);
const post = {};
post[response.id] = { ...response };
yield put({ type: ADD_POST, payload: response });
} catch (error) {
console.log(error);
}
}
Like I said this creates the post fine, but I am unsure on how to redirect after it completes. I know in redux-thunk you can use .then() but not an option as far as I can tell with redux-saga.
reactjs redux react-router redux-saga
asked Nov 15 '18 at 18:03
CHBresserCHBresser
627
Is the newly created post on another URL? If so,this.props.history.push(URL_OF_BLOG_POST). Or if the new blog post is on the same page but you just want to scroll the page to it, thenReactDom.findDOMNode(DOM_NODE).scrollIntoView().
– Shawn Andrews
Nov 15 '18 at 18:13
I could usethis.props.history.push(URL_OF_BLOG_POST)if I knew the url of the post, but I don't until the saga finishes.
– CHBresser
Nov 15 '18 at 18:23
Afteryield put({ type: ADD_POST, payload: response })addyield call(redirectToBlogPost)?
– Shawn Andrews
Nov 15 '18 at 19:06
That would work... if I knew how toredirectToBlogPost.props.historyis not available in the saga, and I have no way of knowing the URL until the saga completes, so I can't redirect from the component because I don't know the URL, and I can't redirect from the saga because it doesn't have a method of redirecting.
– CHBresser
Nov 15 '18 at 20:17
add a comment |
I have a blog where you can create a post, that works fine. What I want to do is redirect to the newly created post after creation.
postActions.js:
export function* watchCreatePost() {
yield takeEvery(CREATE_POST, createPostSaga);
}
function* createPostSaga(action) {
const token = yield select(selectToken);
const headerParams = {
Authorization: `JWT ${token}`
};
const apiCall = () => {
let formData = new FormData();
formData.append("title", action.payload.title);
formData.append("content", action.payload.content);
formData.append("thumbnail", action.payload.thumbnail);
formData.append("tags", action.payload.tags);
formData.append("slug", generateSlug(action.payload.title));
return axios({
method: "post",
url: "/posts/",
data: formData,
headers: headerParams
})
.then(response => response.data)
.catch(err => {
throw err;
});
};
try {
const response = yield call(apiCall);
const post = {};
post[response.id] = { ...response };
yield put({ type: ADD_POST, payload: response });
} catch (error) {
console.log(error);
}
}
Like I said this creates the post fine, but I am unsure on how to redirect after it completes. I know in redux-thunk you can use .then() but not an option as far as I can tell with redux-saga.
reactjs redux react-router redux-saga
asked Nov 15 '18 at 18:03
CHBresserCHBresser
627
I have a blog where you can create a post, that works fine. What I want to do is redirect to the newly created post after creation.
postActions.js:
export function* watchCreatePost() {
yield takeEvery(CREATE_POST, createPostSaga);
}
function* createPostSaga(action) {
const token = yield select(selectToken);
const headerParams = {
Authorization: `JWT ${token}`
};
const apiCall = () => {
let formData = new FormData();
formData.append("title", action.payload.title);
formData.append("content", action.payload.content);
formData.append("thumbnail", action.payload.thumbnail);
formData.append("tags", action.payload.tags);
formData.append("slug", generateSlug(action.payload.title));
return axios({
method: "post",
url: "/posts/",
data: formData,
headers: headerParams
})
.then(response => response.data)
.catch(err => {
throw err;
});
};
try {
const response = yield call(apiCall);
const post = {};
post[response.id] = { ...response };
yield put({ type: ADD_POST, payload: response });
} catch (error) {
console.log(error);
}
}
Like I said this creates the post fine, but I am unsure on how to redirect after it completes. I know in redux-thunk you can use .then() but not an option as far as I can tell with redux-saga.
reactjs redux react-router redux-saga
reactjs redux react-router redux-saga
asked Nov 15 '18 at 18:03
CHBresserCHBresser
627
asked Nov 15 '18 at 18:03
CHBresserCHBresser
627
asked Nov 15 '18 at 18:03
CHBresserCHBresser
627
asked Nov 15 '18 at 18:03
CHBresserCHBresser
627
asked Nov 15 '18 at 18:03
CHBresserCHBresser
627
627
Is the newly created post on another URL? If so,this.props.history.push(URL_OF_BLOG_POST). Or if the new blog post is on the same page but you just want to scroll the page to it, thenReactDom.findDOMNode(DOM_NODE).scrollIntoView().
– Shawn Andrews
Nov 15 '18 at 18:13
I could usethis.props.history.push(URL_OF_BLOG_POST)if I knew the url of the post, but I don't until the saga finishes.
– CHBresser
Nov 15 '18 at 18:23
Afteryield put({ type: ADD_POST, payload: response })addyield call(redirectToBlogPost)?
– Shawn Andrews
Nov 15 '18 at 19:06
That would work... if I knew how toredirectToBlogPost.props.historyis not available in the saga, and I have no way of knowing the URL until the saga completes, so I can't redirect from the component because I don't know the URL, and I can't redirect from the saga because it doesn't have a method of redirecting.
– CHBresser
Nov 15 '18 at 20:17
add a comment |
Is the newly created post on another URL? If so,this.props.history.push(URL_OF_BLOG_POST). Or if the new blog post is on the same page but you just want to scroll the page to it, thenReactDom.findDOMNode(DOM_NODE).scrollIntoView().
– Shawn Andrews
Nov 15 '18 at 18:13
I could usethis.props.history.push(URL_OF_BLOG_POST)if I knew the url of the post, but I don't until the saga finishes.
– CHBresser
Nov 15 '18 at 18:23
Afteryield put({ type: ADD_POST, payload: response })addyield call(redirectToBlogPost)?
– Shawn Andrews
Nov 15 '18 at 19:06
That would work... if I knew how toredirectToBlogPost.props.historyis not available in the saga, and I have no way of knowing the URL until the saga completes, so I can't redirect from the component because I don't know the URL, and I can't redirect from the saga because it doesn't have a method of redirecting.
– CHBresser
Nov 15 '18 at 20:17
Is the newly created post on another URL? If so,
this.props.history.push(URL_OF_BLOG_POST). Or if the new blog post is on the same page but you just want to scroll the page to it, then ReactDom.findDOMNode(DOM_NODE).scrollIntoView().– Shawn Andrews
Nov 15 '18 at 18:13
Is the newly created post on another URL? If so,
this.props.history.push(URL_OF_BLOG_POST). Or if the new blog post is on the same page but you just want to scroll the page to it, then ReactDom.findDOMNode(DOM_NODE).scrollIntoView().– Shawn Andrews
Nov 15 '18 at 18:13
I could use
this.props.history.push(URL_OF_BLOG_POST) if I knew the url of the post, but I don't until the saga finishes.– CHBresser
Nov 15 '18 at 18:23
I could use
this.props.history.push(URL_OF_BLOG_POST) if I knew the url of the post, but I don't until the saga finishes.– CHBresser
Nov 15 '18 at 18:23
After
yield put({ type: ADD_POST, payload: response }) add yield call(redirectToBlogPost) ?– Shawn Andrews
Nov 15 '18 at 19:06
After
yield put({ type: ADD_POST, payload: response }) add yield call(redirectToBlogPost) ?– Shawn Andrews
Nov 15 '18 at 19:06
That would work... if I knew how to
redirectToBlogPost. props.history is not available in the saga, and I have no way of knowing the URL until the saga completes, so I can't redirect from the component because I don't know the URL, and I can't redirect from the saga because it doesn't have a method of redirecting.– CHBresser
Nov 15 '18 at 20:17
That would work... if I knew how to
redirectToBlogPost. props.history is not available in the saga, and I have no way of knowing the URL until the saga completes, so I can't redirect from the component because I don't know the URL, and I can't redirect from the saga because it doesn't have a method of redirecting.– CHBresser
Nov 15 '18 at 20:17
add a comment |
1 Answer
1
active
oldest
votes
Your ADD_POST action probably will be managed by a reducer that updates a sort of posts array into the state I guess?
If so
- add a phantom component with a render function that returns null
- add the state.posts array to its state props
- as soon the state.posts is updated you can redirect the user because since it's a component you have access to the history
If you use React-router or a similar library you can import the navigate function and redirect the user inside a saga too
Let me know
answered Nov 22 '18 at 7:59
NoriSteNoriSte
78657
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%2f53325441%2fredirect-to-created-post-after-create-post-saga%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
Your ADD_POST action probably will be managed by a reducer that updates a sort of posts array into the state I guess?
If so
- add a phantom component with a render function that returns null
- add the state.posts array to its state props
- as soon the state.posts is updated you can redirect the user because since it's a component you have access to the history
If you use React-router or a similar library you can import the navigate function and redirect the user inside a saga too
Let me know
answered Nov 22 '18 at 7:59
NoriSteNoriSte
78657
add a comment |
Your ADD_POST action probably will be managed by a reducer that updates a sort of posts array into the state I guess?
If so
- add a phantom component with a render function that returns null
- add the state.posts array to its state props
- as soon the state.posts is updated you can redirect the user because since it's a component you have access to the history
If you use React-router or a similar library you can import the navigate function and redirect the user inside a saga too
Let me know
answered Nov 22 '18 at 7:59
NoriSteNoriSte
78657
add a comment |
Your ADD_POST action probably will be managed by a reducer that updates a sort of posts array into the state I guess?
If so
- add a phantom component with a render function that returns null
- add the state.posts array to its state props
- as soon the state.posts is updated you can redirect the user because since it's a component you have access to the history
If you use React-router or a similar library you can import the navigate function and redirect the user inside a saga too
Let me know
answered Nov 22 '18 at 7:59
NoriSteNoriSte
78657
Your ADD_POST action probably will be managed by a reducer that updates a sort of posts array into the state I guess?
If so
- add a phantom component with a render function that returns null
- add the state.posts array to its state props
- as soon the state.posts is updated you can redirect the user because since it's a component you have access to the history
If you use React-router or a similar library you can import the navigate function and redirect the user inside a saga too
Let me know
answered Nov 22 '18 at 7:59
NoriSteNoriSte
78657
answered Nov 22 '18 at 7:59
NoriSteNoriSte
78657
answered Nov 22 '18 at 7:59
NoriSteNoriSte
78657
answered Nov 22 '18 at 7:59
NoriSteNoriSte
78657
78657
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%2f53325441%2fredirect-to-created-post-after-create-post-saga%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
Is the newly created post on another URL? If so,
this.props.history.push(URL_OF_BLOG_POST). Or if the new blog post is on the same page but you just want to scroll the page to it, thenReactDom.findDOMNode(DOM_NODE).scrollIntoView().– Shawn Andrews
Nov 15 '18 at 18:13
I could use
this.props.history.push(URL_OF_BLOG_POST)if I knew the url of the post, but I don't until the saga finishes.– CHBresser
Nov 15 '18 at 18:23
After
yield put({ type: ADD_POST, payload: response })addyield call(redirectToBlogPost)?– Shawn Andrews
Nov 15 '18 at 19:06
That would work... if I knew how to
redirectToBlogPost.props.historyis not available in the saga, and I have no way of knowing the URL until the saga completes, so I can't redirect from the component because I don't know the URL, and I can't redirect from the saga because it doesn't have a method of redirecting.– CHBresser
Nov 15 '18 at 20:17