[Pre Onboarding] 8월 30일

redux-saga

redux에서는 action을 dispatch하면 바로 state가 변경되기 때문에, (promise 등을 반환하는) 비동기 처리가 불가능하여 redux-saga, redux thunk 등의 라이브러리를 사용해야 합니다.
redux-thunk가 오랜 기간 사용되긴 했지만, redux-saga가 비동기의 다양한 상황을 처리하기 좋고, 테스트나 디버깅이 쉽기 때문에 더 많이 사용되는 추세입니다.

출처: https://www.youtube.com/watch?v=VHszuWZk0JA

middleware

Node.js에서는 middleware 참 많이 사용하죠! 클라이언트에서 요청받고 응답하는 사이에 위와같이 거쳐가는 여러 함수들을 의미 합니다. CORS 처리도 하고, 라우트 처리, 오류 처리 등등.. 응답과 요청 사이에 다양한 기능을 추가할 수 있습니다.

Redux에서의 middleware는 action과 reducer 사이, 즉 action을 dispatch하고 reducer로 state가 변경 되기 전, 그 사이에서 여러 작업을 합니다. 예를 들어 로그 남기기, 비동기 처리 등의 라이브러리가 있습니다.

generator (ES6)

• generator함수를 만들 때는 function* 키워드를 사용합니다. (잘 이해 못해도 redux-saga 사용가능)

function* generateNumber() {
  yield 1;
  yield 2;
  return 3;
}

const generator = generateNumber();

console.log(generator.next().value) // 1
console.log(generator.next().value) // 2
console.log(generator.next().value) // 3
console.log(generator.next().value) // undefined

• generator함수를 호출하면 객체를 반환하는데, 그 객체에 next라는 key가 있고, next메서드를 호출하면 다시 객체를 반환합니다.

redux-saga에서의 generator

---

• redux-saga에서의 saga가 generator 함수를 의미함
• generator 기반으로 비동기 작업을 관리함
• generator 함수에서 action에 따른 작업을 yield

redux-saga

• redux-saga에서 말하는 side effect는 (부정적인 의미의) 부작용이 아니라, 부수효과를 의미합니다. 다양한 기능들이 있기 때문에 내가 구현하고 싶은 기능에 따라 사용하면 됩니다.
• takeEvery: 모든 액션을 유효하게 인정
• takeLatest: 마지막 액션 하나만 유효하게 인정