在回調調用產量，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