Discard handling a network request when a component unmountsHow to show a loading indicator in React Redux app while fetching the data?Prevent react-native-router-flux from rendering all componentsComponent is not unmount after its delete in storeReact: How to access component refs from Redux/Flux actions?Redux - Unmount-Mount Component causes infinite loopredux-saga Network Error - OPTIONS requestRedux form unmounting component onSubmitReact-native component cache (or prevent unmounting) (react-navigation)Handling Local state and Redux State within a componentchanging state error on component will unmount
Is this apparent Class Action settlement a spam message?
How can we prove that any integral in the set of non-elementary integrals cannot be expressed in the form of elementary functions?
Class Action - which options I have?
Is a stroke of luck acceptable after a series of unfavorable events?
Escape a backup date in a file name
Why didn't Theresa May consult with Parliament before negotiating a deal with the EU?
Was Spock the First Vulcan in Starfleet?
Detecting if an element is found inside a container
How to safely derail a train during transit?
Did the DC-9 ever use RATO in revenue service?
How to run a prison with the smallest amount of guards?
How to be diplomatic in refusing to write code that breaches the privacy of our users
What is the difference between "behavior" and "behaviour"?
Customer Requests (Sometimes) Drive Me Bonkers!
Is exact Kanji stroke length important?
What Brexit proposals are on the table in the indicative votes on the 27th of March 2019?
Why escape if the_content isnt?
How to Reset Passwords on Multiple Websites Easily?
Avoiding estate tax by giving multiple gifts
A particular customize with green line and letters for subfloat
What does the word "Atten" mean?
What happens if you roll doubles 3 times then land on "Go to jail?"
Tiptoe or tiphoof? Adjusting words to better fit fantasy races
What does "I’d sit this one out, Cap," imply or mean in the context?
Discard handling a network request when a component unmounts
How to show a loading indicator in React Redux app while fetching the data?Prevent react-native-router-flux from rendering all componentsComponent is not unmount after its delete in storeReact: How to access component refs from Redux/Flux actions?Redux - Unmount-Mount Component causes infinite loopredux-saga Network Error - OPTIONS requestRedux form unmounting component onSubmitReact-native component cache (or prevent unmounting) (react-navigation)Handling Local state and Redux State within a componentchanging state error on component will unmount
Disclaimer: I know this answer has already been asked, but in my case I need a solution for a specific case that is not really covered by other questions/answers.
In my react-native application, I do a lot of network requests that may take a long time to complete. Each request is handled in two main ways:
- The request completed successfully. The global redux/flux state is updated and therefore the nested components are updated as well.
- The request throws an error. A network error, a server error, a
400error, whatever. In this case a message must be displayed to the user, in the form of a message that appears on the screen or as an alert.
My problem is that when a component is unmounted, the fetch callbacks are processed anyway when the request completes. In the first case, this is not a problem: the store is updated successfully and everyone is happy.
In the second case though, it is a problem because:
- The alert would be displayed in a different screen, which is not correct and led to problems with the
Modalcomponent which I use to present error alerts. - The appearance/disappearance of the error message is controlled by the component LOCAL state, which can not be updated on an unmounted component and therefore throws an error.
What are my possibile solutions here? The most trivial one would be to use in each component a _isMounted property and in each fetch error handler, don't do anything if _isMounted == false. However, this approach is verbose and an antipattern.
Do I have any other option?
react-native redux es6-promise fetch-api
asked Mar 8 at 10:44
gbalduzzigbalduzzi
1,820723
add a comment |
Disclaimer: I know this answer has already been asked, but in my case I need a solution for a specific case that is not really covered by other questions/answers.
In my react-native application, I do a lot of network requests that may take a long time to complete. Each request is handled in two main ways:
- The request completed successfully. The global redux/flux state is updated and therefore the nested components are updated as well.
- The request throws an error. A network error, a server error, a
400error, whatever. In this case a message must be displayed to the user, in the form of a message that appears on the screen or as an alert.
My problem is that when a component is unmounted, the fetch callbacks are processed anyway when the request completes. In the first case, this is not a problem: the store is updated successfully and everyone is happy.
In the second case though, it is a problem because:
- The alert would be displayed in a different screen, which is not correct and led to problems with the
Modalcomponent which I use to present error alerts. - The appearance/disappearance of the error message is controlled by the component LOCAL state, which can not be updated on an unmounted component and therefore throws an error.
What are my possibile solutions here? The most trivial one would be to use in each component a _isMounted property and in each fetch error handler, don't do anything if _isMounted == false. However, this approach is verbose and an antipattern.
Do I have any other option?
react-native redux es6-promise fetch-api
asked Mar 8 at 10:44
gbalduzzigbalduzzi
1,820723
Where are the fetch requests performed? Are the in the component or are they in the redux action?
– Andrew
Mar 8 at 17:27
The fetch requests are performed in a different file, but they are exposed to the component as a Promise in order to graphically handle the result
– gbalduzzi
Mar 11 at 8:09
add a comment |
Disclaimer: I know this answer has already been asked, but in my case I need a solution for a specific case that is not really covered by other questions/answers.
In my react-native application, I do a lot of network requests that may take a long time to complete. Each request is handled in two main ways:
- The request completed successfully. The global redux/flux state is updated and therefore the nested components are updated as well.
- The request throws an error. A network error, a server error, a
400error, whatever. In this case a message must be displayed to the user, in the form of a message that appears on the screen or as an alert.
My problem is that when a component is unmounted, the fetch callbacks are processed anyway when the request completes. In the first case, this is not a problem: the store is updated successfully and everyone is happy.
In the second case though, it is a problem because:
- The alert would be displayed in a different screen, which is not correct and led to problems with the
Modalcomponent which I use to present error alerts. - The appearance/disappearance of the error message is controlled by the component LOCAL state, which can not be updated on an unmounted component and therefore throws an error.
What are my possibile solutions here? The most trivial one would be to use in each component a _isMounted property and in each fetch error handler, don't do anything if _isMounted == false. However, this approach is verbose and an antipattern.
Do I have any other option?
react-native redux es6-promise fetch-api
asked Mar 8 at 10:44
gbalduzzigbalduzzi
1,820723
Disclaimer: I know this answer has already been asked, but in my case I need a solution for a specific case that is not really covered by other questions/answers.
In my react-native application, I do a lot of network requests that may take a long time to complete. Each request is handled in two main ways:
- The request completed successfully. The global redux/flux state is updated and therefore the nested components are updated as well.
- The request throws an error. A network error, a server error, a
400error, whatever. In this case a message must be displayed to the user, in the form of a message that appears on the screen or as an alert.
My problem is that when a component is unmounted, the fetch callbacks are processed anyway when the request completes. In the first case, this is not a problem: the store is updated successfully and everyone is happy.
In the second case though, it is a problem because:
- The alert would be displayed in a different screen, which is not correct and led to problems with the
Modalcomponent which I use to present error alerts. - The appearance/disappearance of the error message is controlled by the component LOCAL state, which can not be updated on an unmounted component and therefore throws an error.
What are my possibile solutions here? The most trivial one would be to use in each component a _isMounted property and in each fetch error handler, don't do anything if _isMounted == false. However, this approach is verbose and an antipattern.
Do I have any other option?
react-native redux es6-promise fetch-api
react-native redux es6-promise fetch-api
asked Mar 8 at 10:44
gbalduzzigbalduzzi
1,820723
asked Mar 8 at 10:44
gbalduzzigbalduzzi
1,820723
asked Mar 8 at 10:44
gbalduzzigbalduzzi
1,820723
asked Mar 8 at 10:44
gbalduzzigbalduzzi
1,820723
asked Mar 8 at 10:44
gbalduzzigbalduzzi
1,820723
1,820723
Where are the fetch requests performed? Are the in the component or are they in the redux action?
– Andrew
Mar 8 at 17:27
The fetch requests are performed in a different file, but they are exposed to the component as a Promise in order to graphically handle the result
– gbalduzzi
Mar 11 at 8:09
add a comment |
Where are the fetch requests performed? Are the in the component or are they in the redux action?
– Andrew
Mar 8 at 17:27
The fetch requests are performed in a different file, but they are exposed to the component as a Promise in order to graphically handle the result
– gbalduzzi
Mar 11 at 8:09
Where are the fetch requests performed? Are the in the component or are they in the redux action?
– Andrew
Mar 8 at 17:27
Where are the fetch requests performed? Are the in the component or are they in the redux action?
– Andrew
Mar 8 at 17:27
The fetch requests are performed in a different file, but they are exposed to the component as a Promise in order to graphically handle the result
– gbalduzzi
Mar 11 at 8:09
The fetch requests are performed in a different file, but they are exposed to the component as a Promise in order to graphically handle the result
– gbalduzzi
Mar 11 at 8:09
add a comment |
1 Answer
1
active
oldest
votes
If you are using react-navigation I believe you could deduct the state in actions and not call the alert.
My suggestion is that you pass the navigation prop to action method and deduct the navigation state there and call the alert as you require.
answered Mar 8 at 11:34
Naveen VigneshNaveen Vignesh
359113
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%2f55061516%2fdiscard-handling-a-network-request-when-a-component-unmounts%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
If you are using react-navigation I believe you could deduct the state in actions and not call the alert.
My suggestion is that you pass the navigation prop to action method and deduct the navigation state there and call the alert as you require.
answered Mar 8 at 11:34
Naveen VigneshNaveen Vignesh
359113
add a comment |
If you are using react-navigation I believe you could deduct the state in actions and not call the alert.
My suggestion is that you pass the navigation prop to action method and deduct the navigation state there and call the alert as you require.
answered Mar 8 at 11:34
Naveen VigneshNaveen Vignesh
359113
add a comment |
If you are using react-navigation I believe you could deduct the state in actions and not call the alert.
My suggestion is that you pass the navigation prop to action method and deduct the navigation state there and call the alert as you require.
answered Mar 8 at 11:34
Naveen VigneshNaveen Vignesh
359113
If you are using react-navigation I believe you could deduct the state in actions and not call the alert.
My suggestion is that you pass the navigation prop to action method and deduct the navigation state there and call the alert as you require.
answered Mar 8 at 11:34
Naveen VigneshNaveen Vignesh
359113
answered Mar 8 at 11:34
Naveen VigneshNaveen Vignesh
359113
answered Mar 8 at 11:34
Naveen VigneshNaveen Vignesh
359113
answered Mar 8 at 11:34
Naveen VigneshNaveen Vignesh
359113
359113
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%2f55061516%2fdiscard-handling-a-network-request-when-a-component-unmounts%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 are the fetch requests performed? Are the in the component or are they in the redux action?
– Andrew
Mar 8 at 17:27
The fetch requests are performed in a different file, but they are exposed to the component as a Promise in order to graphically handle the result
– gbalduzzi
Mar 11 at 8:09