Mixing
Design principle for making ajax calls in ReactJS (where to place ajax calls)
I have came across scenarios asking myself where should some call be made, e.g. in the parent or the child. I am using the built in ReactJS Context to pass data through the component tree, however, in terms of ajax calls what design principle should be applied? I know the right way to make API calls are inside the componentDidMount, however, should I create an ajax api helper class and pass that helper class function into whatever components I need or should I always make an ajax call within the intended component that needs to retrieve or post data? What are good design pattern principles?
I do not want to use Redux since my ReactJS project is small and nothing to complex.
javascript reactjs
asked Nov 19 '18 at 21:18
RobinRobin
1319
add a comment |
I have came across scenarios asking myself where should some call be made, e.g. in the parent or the child. I am using the built in ReactJS Context to pass data through the component tree, however, in terms of ajax calls what design principle should be applied? I know the right way to make API calls are inside the componentDidMount, however, should I create an ajax api helper class and pass that helper class function into whatever components I need or should I always make an ajax call within the intended component that needs to retrieve or post data? What are good design pattern principles?
I do not want to use Redux since my ReactJS project is small and nothing to complex.
javascript reactjs
asked Nov 19 '18 at 21:18
RobinRobin
1319
Where is your code? Please see stackoverflow.com/help/how-to-ask
– colecmc
Nov 19 '18 at 21:23
how are you making the ajax requests right now, an XHR object?
– Velimir Tchatchevsky
Nov 19 '18 at 21:23
This may be helpful: reactjs.org/docs/faq-ajax.html
– colecmc
Nov 19 '18 at 21:24
I always go with this "should I create an ajax api helper class and pass that helper class function into whatever components I need" the new Context works great with it, and you can save your api responses in your helper. It becomes a kind of cache so you will have to manage your own cache invalidating logic.
– Mark E
Nov 19 '18 at 23:14
add a comment |
I have came across scenarios asking myself where should some call be made, e.g. in the parent or the child. I am using the built in ReactJS Context to pass data through the component tree, however, in terms of ajax calls what design principle should be applied? I know the right way to make API calls are inside the componentDidMount, however, should I create an ajax api helper class and pass that helper class function into whatever components I need or should I always make an ajax call within the intended component that needs to retrieve or post data? What are good design pattern principles?
I do not want to use Redux since my ReactJS project is small and nothing to complex.
javascript reactjs
asked Nov 19 '18 at 21:18
RobinRobin
1319
I have came across scenarios asking myself where should some call be made, e.g. in the parent or the child. I am using the built in ReactJS Context to pass data through the component tree, however, in terms of ajax calls what design principle should be applied? I know the right way to make API calls are inside the componentDidMount, however, should I create an ajax api helper class and pass that helper class function into whatever components I need or should I always make an ajax call within the intended component that needs to retrieve or post data? What are good design pattern principles?
I do not want to use Redux since my ReactJS project is small and nothing to complex.
javascript reactjs
javascript reactjs
asked Nov 19 '18 at 21:18
RobinRobin
1319
asked Nov 19 '18 at 21:18
RobinRobin
1319
asked Nov 19 '18 at 21:18
RobinRobin
1319
asked Nov 19 '18 at 21:18
RobinRobin
1319
asked Nov 19 '18 at 21:18
RobinRobin
1319
1319
Where is your code? Please see stackoverflow.com/help/how-to-ask
– colecmc
Nov 19 '18 at 21:23
how are you making the ajax requests right now, an XHR object?
– Velimir Tchatchevsky
Nov 19 '18 at 21:23
This may be helpful: reactjs.org/docs/faq-ajax.html
– colecmc
Nov 19 '18 at 21:24
I always go with this "should I create an ajax api helper class and pass that helper class function into whatever components I need" the new Context works great with it, and you can save your api responses in your helper. It becomes a kind of cache so you will have to manage your own cache invalidating logic.
– Mark E
Nov 19 '18 at 23:14
add a comment |
Where is your code? Please see stackoverflow.com/help/how-to-ask
– colecmc
Nov 19 '18 at 21:23
how are you making the ajax requests right now, an XHR object?
– Velimir Tchatchevsky
Nov 19 '18 at 21:23
This may be helpful: reactjs.org/docs/faq-ajax.html
– colecmc
Nov 19 '18 at 21:24
I always go with this "should I create an ajax api helper class and pass that helper class function into whatever components I need" the new Context works great with it, and you can save your api responses in your helper. It becomes a kind of cache so you will have to manage your own cache invalidating logic.
– Mark E
Nov 19 '18 at 23:14
Where is your code? Please see stackoverflow.com/help/how-to-ask
– colecmc
Nov 19 '18 at 21:23
Where is your code? Please see stackoverflow.com/help/how-to-ask
– colecmc
Nov 19 '18 at 21:23
how are you making the ajax requests right now, an XHR object?
– Velimir Tchatchevsky
Nov 19 '18 at 21:23
how are you making the ajax requests right now, an XHR object?
– Velimir Tchatchevsky
Nov 19 '18 at 21:23
This may be helpful: reactjs.org/docs/faq-ajax.html
– colecmc
Nov 19 '18 at 21:24
This may be helpful: reactjs.org/docs/faq-ajax.html
– colecmc
Nov 19 '18 at 21:24
I always go with this "should I create an ajax api helper class and pass that helper class function into whatever components I need" the new Context works great with it, and you can save your api responses in your helper. It becomes a kind of cache so you will have to manage your own cache invalidating logic.
– Mark E
Nov 19 '18 at 23:14
I always go with this "should I create an ajax api helper class and pass that helper class function into whatever components I need" the new Context works great with it, and you can save your api responses in your helper. It becomes a kind of cache so you will have to manage your own cache invalidating logic.
– Mark E
Nov 19 '18 at 23:14
add a comment |
0
active
oldest
votes
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%2f53382773%2fdesign-principle-for-making-ajax-calls-in-reactjs-where-to-place-ajax-calls%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53382773%2fdesign-principle-for-making-ajax-calls-in-reactjs-where-to-place-ajax-calls%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
Where is your code? Please see stackoverflow.com/help/how-to-ask
– colecmc
Nov 19 '18 at 21:23
how are you making the ajax requests right now, an XHR object?
– Velimir Tchatchevsky
Nov 19 '18 at 21:23
This may be helpful: reactjs.org/docs/faq-ajax.html
– colecmc
Nov 19 '18 at 21:24
I always go with this "should I create an ajax api helper class and pass that helper class function into whatever components I need" the new Context works great with it, and you can save your api responses in your helper. It becomes a kind of cache so you will have to manage your own cache invalidating logic.
– Mark E
Nov 19 '18 at 23:14