在回调中调用 yield,redux saga 给了我一个异常为什么?
Calling yield in callback, redux saga gives me an exception why?
所以我注释掉了它给我回溯的地方。
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)
// yield put({type: "UDATE", {img: e.target.result})
})
}
更新:
这是我让代码工作的 promisified 函数。
function readFileWithPromise(file){
return new Promise((resolve, reject) => {
readFile(file, function(e){
if (e){
resolve(e)
}else{
reject(e)
}
})
})
}
你不能在回调中使用 yield ,有两种方法可以避免这种情况:
cps效果。 DOCS LINK
import { cps , ... } from 'redux-saga/effects';
export function* watchFileReader(){
const action = yield take("DROP_FILE")
let file = action.file[0];
let e = yield cps(readFile,file); <----------------
sessionStorage.removeItem('img')
sessionStorage.setItem('img', e.target.result)
yield put({type: "UPDATE", img: e.target.result})
}
注意:函数必须调用 cb(null, result) 来通知中间件成功的结果。如果 fn 遇到错误,则它必须调用 cb(error) 以通知中间件发生了错误。
promisify 你的函数
function readFileWithPromise(file){
return new Promise((resolve,reject)=>{
readFile(file,(err, res) => err ? reject(err) : resolve(res));
});
}
然后调用它
import { call, ... } from 'redux-saga/effects';
export function* watchFileReader(){
const action = yield take("DROP_FILE")
let file = action.file[0];
let e = yield call(readFileWithPromise,file); <----------------
sessionStorage.removeItem('img')
sessionStorage.setItem('img', e.target.result)
yield put({type: "UPDATE", img: e.target.result})
}
所以我注释掉了它给我回溯的地方。
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)
// yield put({type: "UDATE", {img: e.target.result})
})
}
更新: 这是我让代码工作的 promisified 函数。
function readFileWithPromise(file){
return new Promise((resolve, reject) => {
readFile(file, function(e){
if (e){
resolve(e)
}else{
reject(e)
}
})
})
}
你不能在回调中使用 yield ,有两种方法可以避免这种情况:
cps效果。 DOCS LINK
import { cps , ... } from 'redux-saga/effects'; export function* watchFileReader(){ const action = yield take("DROP_FILE") let file = action.file[0]; let e = yield cps(readFile,file); <---------------- sessionStorage.removeItem('img') sessionStorage.setItem('img', e.target.result) yield put({type: "UPDATE", img: e.target.result}) }
注意:函数必须调用 cb(null, result) 来通知中间件成功的结果。如果 fn 遇到错误,则它必须调用 cb(error) 以通知中间件发生了错误。
promisify 你的函数
function readFileWithPromise(file){ return new Promise((resolve,reject)=>{ readFile(file,(err, res) => err ? reject(err) : resolve(res)); }); }
然后调用它
import { call, ... } from 'redux-saga/effects'; export function* watchFileReader(){ const action = yield take("DROP_FILE") let file = action.file[0]; let e = yield call(readFileWithPromise,file); <---------------- sessionStorage.removeItem('img') sessionStorage.setItem('img', e.target.result) yield put({type: "UPDATE", img: e.target.result}) }