react nodeBird 1-11 (리덕스 사가 이펙트)

sagas/index.js

  위 그림처럼 fork, all 등을 리덕스 사가 이펙트라고 부릅니다. all 이펙트는 배열을 받는데, 안에 있는 것들을 한번에 실행시킵니다.

  fork는 함수를 실행시키는 역할을 합니다. call도 함수를 실행시키지만 차이점이 있습니다. fork는 비동기함수호출이고, call은 동기함수호출입니다. 

sagas/user.js

  위 항목처럼 fork는 result 값이 한번 거쳤다가 함수를 호출하는게 아니라 return axios.post('api/login')이 바로 실행되는 것과 같고, call의 경우, axios.post('api/login').then()을 한 효과를 나타납니다. 따라서, 둘의 차이점은 결과값이 나올때까지 기다려주느냐(call) 아니냐(fork)의 차이가 있습니다.

  put은 리듀서의 dispatch라고 보면 됩니다. take, takeLatest, takeEvery가 있고 take는 일회용이라 재사용이 불가해서 while(true) {

 yield take('LOG_IN_REQUEST); }

를 사용할 수 있지만, 직관적이지 않고, 동기적으로 사용되므로, 비동기적인 기능을 하는 TakeEvery를 사용합니다. 

yield takeEvery('LOG_IN_REQUEST);

  takeLatest는 100번 연속 클릭하게 된다면 99번은 무시하고, 마지막 1번만 호출하게 할 수 있습니다. 하지만 백엔드서버에서 오는 응답을 취소하는것이지 프론트서버에서 보내는 요청을 취소하는게 아니라서 백엔드서버에서 데이터가 2번 저장될 수 있는 단점이 있습니다. 따라서, 백엔드 서버 설정시 데이터가 2번 저장되지 않게 검사를 해줘야합니다. 

  리덕스사가 이펙트는 throttle도 있습니다. 시간 딜레이를 통하여 한번만 실행되게끔 할 수 있습니다. throttle과 debounce의 차이점은 아래와 같습니다.

  쓰로틀링: 마지막호출된 함수를 실행 후 일정시간이 지나기전에 다시 호출되게 하지 않는 것

  디바운싱: 연이어 호출되는 함수 중 마지막 함수만 호출되게 하는 것

  리덕스, 리덕스 사가를 할 때 제일 중요한 부분은 데이터 흐름이 어떻게 되는지 생각을 하면서 코드를 작성해야된다는 거에 있습니다.