[React] redux-saga - take, takeEvery

현재 프로젝트엔 take로 코드를 작성해서

여기에 takeEvery에 대한 간략한 설명을 남기고자 한다.

 

---

 

redux-saga는 미들웨어에서 백그라운드로 실행되어 reducer와 마찬가지로 action을 캐치해 실행된다.

 

- take의 경우 ACTION을 캐치해 함수를 실행시킨다.

- takeEvey의 경우 무한하게 take를 실행하는 것으로 while(true)문 안에 take를 실행하는 것이라 생각하면 된다.

 

소스를 바로 보자

아래 두 코드는 같은 동작을 한다.

// take 사용
function* takeFetchActionSaga() {
  while(true){
    const action = yield take('FETCH_ACTION');
    const result = yield call(() => fetch('/api/data');
    yield put({
      type: 'FETCH_ACTION_SUCCESS',
      payload: result.json()
    });
  }
}

// takeEvery 사용
function* takeFetchActionSaga() {
  yield takeEvery('FETCH_ACTION', getData)
}

function* getData(action) {
  const result = yield call(() => fetch('/api/data'))
  yield put({
    type: 'FETCH_ACTION_SUCCESS',
    payload: result.json()
  })
}

// take 사용

function* takeFetchActionSaga() {

while(true){

const action = yield take('FETCH_ACTION');

const result = yield call(() => fetch('/api/data');

yield put({

type: 'FETCH_ACTION_SUCCESS',

payload: result.json()

});

}

}