所以我猜我正在做一些根本错误的事情。当我第一次从浏览器上传图像时,会触发以下函数,但只发生一次。所以下次我上传图像时,我没有看到 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()
]
}
最佳答案
take效果只会产生一次。您可以将观察程序代码粘贴到 while 循环中,或者使用 takeEvery来自 redux-saga 的助手。
因为它是一个生成器函数,所以传奇会被挂起,直到操作被中间件捕获并再次产生,所以它不会像一堆无限循环在后台占用CPU一样旋转。
我使用与许多文档相同的设计模式,即有一个“观察者”传奇/流程,它在循环上运行以执行分派(dispatch)的每个操作,并触发执行实际操作的工作传奇或流程举重。
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()
]
}
关于javascript - 为什么 saga 函数第二次不接受请求?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39173179/