1

I'm using redux + react-redux + react-native

There are times (when typing on a text field for example) that multiple requests are sent to the server. How can I handle this case, so that only the last one is processed on the client?

I've read fetch doesn't have a promise reject, so I'm not sure if there is a way to differ promises, or a flow or middleware to handle this correctly in redux, like keeping track of all requests order.

Improve this question

2 Answers 2

Reset to default
1

I'm currently using redux-saga or redux-observable, they internally use RxJS and can cancel previous actions, like when you use takeLatest, only the last action will get completely executed.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

You should have :

  • an action that changes the state of the value of the textfield
  • an other action that makes the request on submit (or using debounce on the onChange)

Here is an example: https://topheman.github.io/react-es6-redux/ (try the dev version, you'll have access to redux-devtools & sourcemaps)

Usefull resource if you don't know about debounce : https://davidwalsh.name/javascript-debounce-function

Improve this answer

1 Comment

Thanks. I have an action that stores the text while it changes and an async thunk for searching that gets triggered if the user stops more than 400ms while typing (sort of a debounce). However in react-native it is usual that requests don't come back in order. For example first search goes for "country", second goes for "country songs", if "country" search returns after second, I end up rendering the wrong search. If I could only reject the first request, or know which one I'm talking about.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.