在回调中调用yield, redux saga给出了一个异常原因

Calling yield in callback, redux saga gives me an exception why?

本文关键字：一个 异常 调用 回调 yield saga redux      更新时间：2023-09-26

所以我注释掉了它给我回溯的地方。

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

更新:这是我承诺的函数，使代码工作。

 function readFileWithPromise(file){
  return new Promise((resolve, reject) => {
   readFile(file, function(e){
     if (e){
      resolve(e)
     }else{
      reject(e)
     }
   })
 })
}

你不能在回调中使用yield，有两种方法可以避免:

  1. cps效果。文档链接

    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)来通知中间件发生了错误。

  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

相关文章：