在回调调用产量，REDX传奇给我一个例外，为什么？

Question

所以我评论了它在哪里给我一个回溯。

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

Answer 1

不能使用回调的产量，有两种方法可以避免这一点：

1. 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，结果）通知成功结果的中间件。如果fn遇到一些错误，那么它必须调用cb（错误）以通知中间件发生了错误。

   ---

2. 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}) 
   } 
   

LIVE DEMO for two examples