Redux - redux middleware

 

 

이번 포스팅에서는 redux middleware에 대해 알아보고 대표적인 두 라이브러리의 차이점에 대해 간략히 언급해보고자 한다. 

 

 

< 목차 >

1. redux middleware
2. redux-thunk & redux-saga

 

 

 

1. redux middleware 

redux-thunk와 redux-saga에 대해 알아보기에 앞서 redux middleware란 무엇인지에 대해 짚고 넘어가야할 필요성이 있다. redux middleware는 기본적으로 action을 dispatch 했을 때 reducer에서 이를 처리하기 전에 사전에 지정된 작업을 수행할 수 있게끔 해주는 역할을 한다. 즉, action과 reducer 사이의 중간자라고 생각하면 된다. 

 

redux middleware workflow

위의 그림은 redux middleware가 어떠한 흐름을 가지고 동작하고 있는지를 보여주고 있다. redux middleware가 없을 때의 redux는 동기적인 흐름으로 동작한다. 특정 이벤트가 발생했을 때 action객체를 생성하고 dispatch(action)을 통해 reducer에게 action 객체를 전달하면 reducer는 정해진 로직에 의해 action을 처리한 후 새로운 상태값을 반환한다. 하지만 동기적인 흐름만으로는 처리하기 힘든 작업들이 존재한다. 가장 대표적인 예로 외부 데이터를 요청하여 그에 따른 응답 화면을 사용자에게 보여줘야 하는 경우를 들 수 있다. 이와같이 비동기적인 작업을 처리하기 위해 사용하는 것이 바로 redux middleware이다. 추가로 React app에서 백엔드 API를 연동하는 경우에도 redux middleware를 사용하여 처리하게 된다.

 

redux middleware를 사용하면 action이 dispatch된 다음 reducer에서 해당 action을 받아와서 상태를 업데이트 하기 전에 추가적인 작업을 하는 것이 가능해진다. 보통의 경우 위에서 언급했던 것처럼 middleware를 사용해 비동기적 작업을 처리하게 되며 비동기적 작업이 완료가 된 시점에서 다시한번 dispatch를 할 수 있다. 즉, middleware를 사용할 경우 두 번의 dispatch( )가 가능해진다. 

 

 

 

2. redux-thunk & redux-saga 

대표적인 redux middleware로는 redux-thunk 와 redux-saga가 있다. 이번 포스팅에서는 둘의 차이점에 대해서만 간략하게 짚고 넘어가보도록 하자.

👉 redux-thunk 

redux는 기본적으로 action 객체만을 dispatch 할 수 있다. 하지만 redux-thunk를 사용하면 객체 대신 함수를 생성하는 action 생성 함수를 작성할 수 있게 된다. 다시말해 action 값으로 객체가 아닌 함수를 전달하여 dispatch 할 수 있다. 그리고 이러한 동작 방식을 활용하여 redux에서 비동기적 프로그래밍을 구현할 수 있게 된다. 

👉 redux-saga 

redux-saga 역시 비동기적 작업을 처리하기 위한 middleware이지만 동작 방식에서 redux-thunk와는 조금 다른 면이 있다. redux-thunk가 함수 자체를 dispatch 할 수 있게 해주는 middleware였다면 redux-saga는 action 객체를 모니터링 하고 있다가 특정 action이 발생했을 때 미리 정해둔 로직에 따라 특정 작업이 이루어지는 방식으로 동작한다. 또한 redux-saga의 경우 제너레이터(Generator) 함수라는 특수한 형태의 함수로 구현된다는 점에서 차이가 있다.