redux-saga : 같은 작업 유형/saga의 여러 작업 취소

Question

동일한 작업 유형의 여러 작업 취소를 redux-saga에 통합하는 방법을 파악하려고합니다. 기본적으로 내 구성 요소가 componentWillUnmount() 일 때 시작되었을 수있는 모든 작업을 취소하고 싶습니다.

I (이 크게 나는 실제로 내 코드에서 무슨에서 단순화,하지만 필수로 내려 깎다하기 위해 노력하고있어) 다음과 같은 조치가있는 경우 :

// Action 
export const loadMyData = params => { 
    let url = /* Create URL based on params */ 
    return { 
    type: FETCH_DATA, 
    url, 
    key: /* a unique key so we can retrieve it in the state later */ 
    } 
} 

을 그리고 다음 사가 :

// Saga 
export function* fetchData(action) { 
    try { 
    // 'callApi()' currently uses axios 
    let response = yield call(callApi, action.url); 

    yield put({ 
     type: FETCH_SUCCESS, 
     key: action.key, 
     payload: response.data 
    }); 
    } catch(error) { 
    yield put({ 
     type: FETCH_FAILURE, 
     error 
    }); 
    } 
} 

export function* watchFetchData() { 
    while (true) { 
    let action = yield take(FETCH_DATA); 
    let task = yield fork(fetchApi, action); 
    } 
} 

위에서 설명한대로 구성 요소는 loadMyData()을 여러 번 호출 할 수 있습니다. 또한 loadMyData()을 호출하는 다른 구성 요소가있을 수 있습니다. 그래서 나는 componentWillUnmount() 상태에있는 구성 요소에서 작업을 취소하는 방법을 찾고 있지만 다른 실행중인 작업은 그대로 두려고합니다.

에서 해당 예제는 취소 작업이 필요한 단일 작업에 대한 것입니다. 그리고 그것을 유스 케이스로 확장하는 방법을 알 수 없습니다. 내 마음에 오는 어떤

Answer 1

은 다음

registerWatchFetchData = (componentKey) => { 
    return { 
    type: "REGISTER_WATCH_FETCH_DATA", 
    payload: { componentKey } 
    } 
} 

감속기 :

// ... 
case "REGISTER_WATCH_FETCH_DATA": 
    return {...state, tasks: {...state.tasks, [action.payload.componentKey]: []}} 

componentWillMount에서

당신이 작업을 파견과 같이 감속기의 작업을 저장하여 구성 요소를 등록

function* watchFetchData() 내에서 제공하는 componentKey에 해당 구성 요소를 입력하면 감속기에 새 작업을 저장합니다. n은 payload :

export function* watchFetchData() { 
    while (true) { 
    let action = yield take(FETCH_DATA); 
    let task = yield fork(fetchApi, action); 
    yield put({ type: "STORE_TASK", payload: { componentKey: action.payload.componentKey, task } }) 
    } 
} 

는 componentWillUnmount에 당신의 componentKey에 대한 모든 작업을 끌어 그들을 통해 반복하고 그들에게 모든 등을 취소 사가에게 다른 작업을 파견

// ... 
case "STORE_TASK": 
    return {...state, tasks: {...state.tasks, [action.payload.componentKey]: [...state.tasks[action.payload.componentKey], action.payload.task]}} 

그리고 감속기에 추가 그래서 :

function* watchUnregisterComponent(){ 
    while(true){ 
     const action = yield take("UNREGISTER_WATCH_FETCH_DATA") 
     const componentTasks = yield select(state => state.myReducer.tasks[action.payload.componentKey]) 
     componentTasks.forEach((t) => { 
      yield cancel(t) 
     }) 
     // dispatch another action to delete them from the reducer 
    } 
}