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

Question

我有一个 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功能。

Answer 1

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

不过，我猜你可以这样做：

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

请注意，这样做就像使用 spawn 效果一样，这意味着新的生成器已分离并且不会被分离，例如取消上述生成器时取消。

Answer 2

你要的是Event Channel的经典范例。

查看下面的 link -

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

样本-

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)
      }
    }
  )
}

希望对您有所帮助！

Answer 3

在您的 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);

Answer 4

 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>

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

How to create setTimeout loop for yield put()

redux-saga