为什么 saga 函数不接受第二次请求?
why isn't saga function accepting a request for the 2nd time around?
所以我猜我做的事情从根本上是错误的。当我第一次从浏览器上传图片时,下面的函数会触发,但它只会发生一次。所以下次我上传图片时,我再也看不到 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()
]
}
来自 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()
]
}
在删除第一个文件后,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 副作用。
所以我猜我做的事情从根本上是错误的。当我第一次从浏览器上传图片时,下面的函数会触发,但它只会发生一次。所以下次我上传图片时,我再也看不到 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()
]
}
来自 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()
]
}
在删除第一个文件后,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 副作用。