Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

setTimeout(function timeoutFn(){
        yield put({type: ANOTHER_WATCHER });
        setTimeout(timeoutFn, 5000);
}, 5000);
You cannot use yield in non-generator function, making timeoutFn a generator does not work as well.
How can I call yield put in an interval. I don't want to use 
while(true) {
        yield delay(5000);
        yield put({type: ANOTHER_WATCHER });
I want to use setTimeout function.
In your saga file, create a delay function like:
const delay = time => new Promise(resolve => setTimeout(resolve, time));
Then create the watcher like:
const fnWatcher = function* () {  
  yield call(delay, 2000);
  yield put({type: 'ACTION_SUCCESS'});
takeEvery("ACTION_NAME", fnWatcher);
                Not working! the action ACTION_SUCCESS is executed without taking the delay call in consideration
– TaouBen
                Aug 17, 2020 at 22:31
Using the delay helper is the right way to do this.
However, I guess you could do something like:
setTimeout(function timeoutFn(){
    sagaMiddleware.run(function*() {
        yield put({type: ANOTHER_WATCHER });
        setTimeout(timeoutFn, 5000);
}, 5000);
Note that doing this is like using the spawn effect meaning the new generator is detached and won't be e.g. cancelled when the above generator is cancelled.
                When attempting this, you get an error regarding sagaMiddleware. Error: Before running a Saga, you must mount the Saga middleware on the Store using applyMiddleware. What it's saying is, this is used to register each of your saga functions, which is often done in a parent context of your root saga. Since you are already in a saga registered via sagaMiddleware, and you are trying to register a new saga inside of that saga, you'd have to first pass down your sagaMiddleware from the parent context. This would be messy and doesn't make a lot of sense.
– John
                Sep 18, 2020 at 20:35
 const { isFetching , statusCode } = this.props; 
 yield put(
      catalogueUpdateProductFormError({
        errorStatus: catalogueUpdateProductDetailsPayload.errorStatus,
        statusCode: 400,
    yield delay(4000);
    yield put(
      catalogueUpdateProductFormError({
        errorStatus: "",
        statusCode: -1,
// we want animation when api response 200 and 400
.toast {
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
    opacity: 0;
    background-color: green;
.fadeOut{
.fadeIn{
    opacity:1;
<div className={ statusCode === 400 ? 'toast fadeIn' : 'toast fadeOut'} >
    <SaveBehavior text={"productSavedError"} iconType="close" /> 
        
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.