사가 기능이 두 번째 요청을 수락하지 않는 이유는 무엇입니까?

Question

그래서 나는 근본적으로 잘못된 것을하고 있다고 생각합니다. 처음 브라우저에서 이미지를 업로드하면 아래의 기능이 실행되지만 한 번만 발생합니다. 그래서 다음에 이미지를 업로드 할 때 watchFileReader 함수가 다시 실행되는 것을 볼 수 없습니다 .. 예상치 못한 행동을하기 위해 다른 사가 함수를 얻고 있기 때문에 이상하게 보입니다. 누군가 내가 뭘 잘못하고 있다고 말할 수 있습니까?

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

Answer 1

take 효과는 한 번만 생성됩니다. while 루프 내에 감시자 코드를 붙이거나 redux-saga의 takeEvery 도우미를 사용할 수 있습니다.

왜냐하면 그 생성기 기능은 미들웨어에 의해 잡히고 다시 양산 될 때까지 정지가됩니다. 그래서 당신은 백그라운드 호깅 CPU에서 무한 루프를 반복 할 것입니다.

많은 워 크처와 동일한 디자인 패턴을 사용합니다. 즉, 모든 작업을 전달하기 위해 루프에서 실행되는 '감시자'사가/프로세스가 있어야하며 작업자 사가 또는 프로세스가 실행되는 프로세스가 실행됩니다. 진짜 무거운 리프팅.

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

Answer 2

는 사가 발생기 function의 상태가 {done: false} 즉 중단 될 것입니다.

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 - 사가에서 제공하는 takeEvery 또는 takeLatest 부작용를 사용합니다 : 활성 상태로 상태를 유지하기 위해 당신은 infinite while loop에 수율 function을 포장 할 수 있습니다.