为什么 saga 函数不接受第二次请求？

Question

所以我猜我做的事情从根本上是错误的。当我第一次从浏览器上传图片时，下面的函数会触发，但它只会发生一次。所以下次我上传图片时，我再也看不到 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()
  ]
}

Answer 1

来自 redux-saga 的 take effect only gets yielded once. You can either stick the watcher code inside a while loop, or use the takeEvery 助手。

因为它是一个生成器函数，所以 saga 会暂停，直到操作被中间件捕获并再次 yield，所以它不像你会有一堆无限循环在后台运行 cpu.

我使用与许多文档相同的设计模式，即有一个 'watcher' saga / process 在循环中运行以执行分派的每个操作，并触发 worker saga 或进程那确实很繁重。

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

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

Answer 2

在删除第一个文件后，saga 生成器 function 的状态将被挂起，即 {done: false}。要保持状态为活动状态，您可以将 yield 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 副作用。

为什么 saga 函数不接受第二次请求？

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

javascript

asynchronous

async-await

redux

redux-saga