Redux-saga - 기본

리덕스 사가를 작성할 때는 제너레이터 문법을 통해 작성한다. 예를 들어,

리덕스 사가에서 delay와 put이라는 함수를 불러왔다. delay는 말 그대로 몇 ms를 딜레이 시키는 함수이고, put은 디스패치와 비슷한 함수이다. increase()를 호출해서 increase 액션 객체를 만들고, 그 객체를 호출하여 리덕스 사가 미들웨어에 명령을 하는 것이다. 리덕스 미들웨어에게 특정 명령을 수행하라고 하기 위해서는 yield를 하면 된다. 보면, yield를 통해 delay(1000) 이라는 함수를 수행할 것을 미들웨어에 보내고 있다.

 

increaseAsync라는 함수를 실행했을 때, increaseSaga라는 명령을 내리게 하고 싶다. 그러면 이제 takeEvery라는 함수도 불러오자.'

takeEvery라는 함수는 INCREASE_ASYNC라는 액션이 디스패치 될 때마다 increaseSaga라는 함수를 실행시키는 것이다. 또한 takeEvery가 아닌 takeLatest와 takeLeading이라는 함수도 있다. takeEvery와 비슷하지만, takeLatest는 들어오는 마지막 액션만을 처리한다. 가령, increaseSaga 또는 decreaseSaga의 delay함수를 처리하고 있는 도중에 만약 새로운 액션이 디스패치 되어 들어온다면, 그 전에 처리하던 함수들은 무시되고 마지막으로 들어온 액션만 처리가 된다. 또, takeLeading은 먼저 처리하던 함수가 실행이 끝나야 새로운 액션을 디스패치 받을 수 있다. 예를들어 처리가 1초 걸리는 함수가 있는데, 0.4초마다 새 액션이 디스패치 되었다고 생각하자. 그럼 첫번째 액션은 디스패치된 후, 1초간 처리가 될 것이고, 그 1초간, 0.4초 후와 0.8초후에 들어온 액션들은 무시가 될것이다. 1초 후에 그 액션은 처리가 완료되었기 때문에, 1.2초 후에 들어온 액션은 실행이 될 수 있다. 

 

루트 리듀서를 만드는 것처럼 루트 사가를 만들고 그를 쓸 수도 있고, 그것이 더 편하기도 하다. 먼저 사가 함수를 export 하자.

그 후, 루트 리듀서를 저장하던 index.js 파일에 루트사가를 만들어 주었다. 루트사가를 만들기 위해서 리덕스사가 effects모듈에서 all이라는 함수를 불러오자. all은 사가들을 배열 안에 넣어 관리할 수 있도록 해준다.

 

이제 redux-saga를 실제로 사용할 차례이다. 먼저 src의 index.js에 createSagaMiddleware 함수를 불러와 사용해 주자. 그 후, 새 객체에 함수를 담는다.

그 후, provider의 store 안에 미들웨어로써 넣어준다. 아래 예시는 redux-thunk도 다루고 있었으므로, 그 아래에 두었다. 위에 두어도 딱히 상관은 없다.

그 후, 지정한 변수인 sagaMiddleware.run(rootSafa)를 실행해 주어 루트 사가의 사가들을 실행시켜준다. 이후, 실행해 보자.

 

로그를 보면, 먼저 DECREASE_ASYNC가 실행된 후, 정확히 1초 후에 DECREASE가 실행된다. 혹시 헷갈릴까봐 쓰는데, 위의 코드에는 없지만 decreaseSaga도 실행할 수 있도록 counterSaga 함수에 넣어두었다.