react nodeBird 1-10(리덕스 사가 이해하기)

 

 리덕스 사가는 

   리액트의 사이드 이펙트만 담당하는 미들웨어 중 하나로, 우리의 앱에서 액션을 받아 처리하고, 멈추고, 취소할 수 있게 만들어주고, 리덕스 상태에 접근하여 액션을 디스패치할 수 있습니다. 또한, 비동기 흐름을 쉽게 읽고, 쓰고, 테스트할 수 있는 ES6 문법인 제너레이터를 사용할 수 있습니다.

 

  npm을 이용하여 리덕스사가와 넥스트와 리덕스사가를 연결하는 next-redux-saga도 설치해줍니다.  

store/configureStore.js

sagas/index.js

  createSagaMiddleware로 선언을 해준뒤 const middleware = [sagaMiddleware];로 연결만 해주면 됩니다. rootSaga를 이용하기 때문에 sagas/index.js 만들어줍니다. 사가는 function* () 제너레이터를 이용합니다. 제너레이터는 아래 그림처럼 gen()한다고 실행되지 않고, gen().next()를 해야 실행이 됩니다.

done: true가 되야 끝이 나는 함수

  제너레이터 함수는 yield를 이용해서 멈출 수 있습니다.  위 그림으로 yield를 이용해서 1씩 증가하는 것을 볼 수 있는데, 제너레이터를 이벤트 리스너처럼 사용할 수 있습니다. yield를 이용한 이 성질을 이용한 것이 redux-saga라고 할 수 있습니다.