为什么一个函数不接受第二次请求?

why isn't saga function accepting a request for the 2nd time around?

本文关键字：不接受 第二次 请求 函数 一个 为什么      更新时间：2023-09-26

所以我猜我做了一些根本性的错误。当我第一次从浏览器上传图像时，下面的函数会触发，但它只会发生一次。所以下次我上传图像时，我没有看到watchFileReader函数再次运行。奇怪的是，它正在发生…因为我得到其他saga函数的行为如预期!谁能告诉我我哪里做错了吗?

export function* watchFileReader() {
  const action = yield take("DROP_FILE")
  console.log('action', action)
  let file = action.file[0];
  readFile(file, function(e) {
    sessionStorage.removeItem('img')
    console.log('alskdjfalsdjkf', e.target.result)
    sessionStorage.setItem('img', e.target.result)
  })
}
export const readFile = (file, callback) => {
  let reader = new FileReader()
  reader.onloadend = callback;
  reader.readAsDataURL(file)
}
export function* rootSaga() {
  yield [
    watchFileReader()
  ]
}

生效只产生一次。您可以将监视程序代码粘贴到while循环中，或者使用redux-saga中的takeEvery帮助器。

因为它是一个生成器函数，所以saga被暂停，直到动作被中间件捕获并再次产生，所以你不会有一堆无限循环在后台旋转，占用cpu。

我使用与许多文档相同的设计模式，即有一个在循环中运行的"观察者"传奇/进程来执行每个已调度的操作，以及一个执行真正繁重工作的工人传奇或进程。

TakeEvery(或者takeLatest，如果你只想获取最新的一个)就像一个永远运行的while循环，每次它得到它正在寻找的动作，派生一个新的worker，这使得它成为一个非阻塞操作。

export function* fileReaderWorker(action) {
  console.log('action', action)
  let file = action.file[0];
  readFile(file, function(e) {
    sessionStorage.removeItem('img')
    console.log('alskdjfalsdjkf', e.target.result)
    sessionStorage.setItem('img', e.target.result)
  })
}
export function* watchFileReader() {
  yield takeEvery("DROP_FILE", fileReaderWorker)
}
// or the loop version
// while (true) {
//  const action = yield take("DROP_FILE")
//  yield fork(fileReaderWorker, ...args.concat(action))
//}
export const readFile = (file, callback) => {
  let reader = new FileReader()
  reader.onloadend = callback;
  reader.readAsDataURL(file)
}
export function* rootSaga() {
  yield [
    watchFileReader()
  ]
}

第一个文件被删除后，saga生成器function的状态将被挂起，即{done: false}。要保持活动状态，您可以将生成function包裹在infinite while loop中:

export function* watchFileReader() {
  while(true) {
   const action = yield take("DROP_FILE")
   console.log('action', action)
   let file = action.file[0];
   readFile(file, function(e) {
    sessionStorage.removeItem('img')
    console.log('alskdjfalsdjkf', e.target.result)
    sessionStorage.setItem('img', e.target.result)
  })
 }
}

或使用redux-saga提供的takeEvery或takeLatest副作用

相关文章：