이전에 배운 내용들
잠깐 이전의 내용을 복습하자면 redux-middleware은 액션이 발생하고 발생한 액션을 reducer로 전달해주는 역할을 하는데 전달해주기전에 redux-middleware 내부에서 원하는 작업을 마친뒤에 reducer로 전달이 가능하다. 이를 통해서 더욱 정교하고 복잡한 작업의 처리가 redux-middleware을 통해서 가능하다는 것을 배웠고 이런 middleware중에서 대표적으로 logger,thunk그리고 saga가 존재한다는 것까지 학습하였다.
logger
logger는 미들웨어에 들어가기 전에 컴포넌트 state의 상태와 나와서 reducer에 전달될 컴포넌트 state 상태를 비교해주는 역할을 한다. 이는 매유 유용한데 logger은 통해서 컴포넌트가 어떻게 바뀌고 있는지를 알수있고 만약 오류가 발생했다면 어디서 오류가 발생하는지에 대한 디버깅을 보다 쉽게 할 수 있도록 도와준다. 나도 개발을 하다가 오류가 발생했는데 logger를 사용하고 안하고의 차이가 많이 난다.
다음과 같이 새로운 액션이 발생을 하면 middleware를 거쳐 reducer에 전달되어 값이 수정되는데 prev state, next state로 state값이 어떻게 수정되었는지 한눈에 볼수있게 해준다.
thunk
thunk는 middleware중 하나로 전달받은 액션이 객체의 형태가 아닌 함수형태로 받아왔을 때 사용이 가능한 함수형 middleware이다.
thunk 함수
thunk 함수는 state값을 읽어 올 수있고 dispatch를 불러와 액션을 디스패치를 할 수있는 함수를 말한다. 일반적으로 const 함수이름 = ()=>(dispatch,getState)=>{내용} 이렇게 사용한다. 이를 활용하여 Router의 history와 같이 사용하여 로그인과 같이 특정 url로 이동하게끔 작성 할 수있다.
saga
redux-saga는 액션을 모니터링하다가 특성(내가 지정한) 액션이 발생을 하면 특정 작업을 수행하게 한다. 여기서 특정 작업이란 발생한 액션을 취소하고 다른 액션으로 대체할 수도 있고 js 코드를 실행 시킬 수도있다. 앞서 배운 thunk와의 차이점은 thunk는 함수를 받아서 사용하는 middleware이지만 saga는 액션 자체를 받아서 사용하는 middleware라는 차이점이 있다.
redux-saga
redux-saga는 Generator문법을 기반으로 두고 있다.
generator 문법은 함수를 특정 구간에서 멈춰놓을 수도 있고 결과 값을 여러번 반환해 줄 수도 있다.
간단한 generator 문법의 설명
generator 함수의 생성 방법
일반적인 함수 : function Viva() , generator 함수: function* Viva()
yeild는 멈춤 지점이다. generator 함수가 실행이 되다가 yeild를 만났을 때 멈춰준다. 다음 실행은 정지했던 yeild 뒤에서 시작된다. 함수의 실행은 next()로 실행한다. generator의 반환값은 객체 형태이다. (값, done)이 들어있는데 값에는 정지된 yeild 안에 들어있는 값이 반환되고 done안에는 해당 generator 함수가 끝이 났는지에 대한 bool 값이 들어있다. 끝이 나면 true, 안끝났으면 false값이 들어있다.
