如何为yield put()创建setTimeout循环

时间:2018-04-02 12:15:58

标签: redux-saga

我有一个传奇观察者:

function* watchSetRefreshInterval() {
    yield takeLatest(SET_LOOP, setLoop);
}

setLoop传奇

function* setLoop() {
        yield put({type: ANOTHER_WATCHER });
}

我希望yield put({type: ANOTHER_WATCHER });以间隔

发生

这不起作用

setTimeout(function timeoutFn(){
        yield put({type: ANOTHER_WATCHER });
        setTimeout(timeoutFn, 5000);
}, 5000);

你不能在非生成器函数中使用yield,使timeoutFn生成器也不起作用。

如何在间隔中调用yield put。我不想使用

while(true) {
        yield delay(5000);
        yield put({type: ANOTHER_WATCHER });
}

我想使用setTimeout函数。

4 个答案:

答案 0 :(得分:1)

你想要的是Event Channel的典型例子。

请查看以下链接 -

https://redux-saga.js.org/docs/advanced/Channels.html

Sample-

import { eventChannel, END } from 'redux-saga'

function countdown(secs) {
  return eventChannel(emitter => {
      const iv = setInterval(() => {
        secs -= 1
        if (secs > 0) {
          emitter(secs)
        } else {
          // this causes the channel to close
          emitter(END)
        }
      }, 1000);
      // The subscriber must return an unsubscribe function
      return () => {
        clearInterval(iv)
      }
    }
  )
}

希望这有帮助!

答案 1 :(得分:0)

使用延迟助手是正确的方法。

但是,我猜你可以这样做:

setTimeout(function timeoutFn(){
    sagaMiddleware.run(function*() {
        yield put({type: ANOTHER_WATCHER });
        setTimeout(timeoutFn, 5000);
    })
}, 5000);

请注意,执行此操作就像使用spawn效果一样意味着新生成器已分离,并且不会例如取消上述发电机时取消。

答案 2 :(得分:0)

在您的saga文件中,创建一个延迟函数,如:

const delay = time => new Promise(resolve => setTimeout(resolve, time));

然后创建观察者,如下所示:

const fnWatcher = function* () {  
  yield call(delay, 2000);
  yield put({type: 'ACTION_SUCCESS'});
};

takeEvery("ACTION_NAME", fnWatcher);

答案 3 :(得分:0)

 const { isFetching , statusCode } = this.props; 
 yield put(
      catalogueUpdateProductFormError({
        errorStatus: catalogueUpdateProductDetailsPayload.errorStatus,
        statusCode: 400,
      })
    );

    yield delay(4000);
    yield put(
      catalogueUpdateProductFormError({
        errorStatus: "",
        statusCode: -1,
      })
    );

//我们想要api响应200和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" /> 
</div>