[Redux] ⛓ 리덕스 미들웨어란 무엇인가? (1)

본 글은 도서 '리액트를 다루는 기술'을 공부하며 정리한 글입니다.

⛓ 리덕스 미들웨어란?

리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업을 실행할 수 있게 해줍니다. 액션과 리듀서 사이의 중간자라고 볼 수 있습니다.

 

전달받은 액션을 단순히 콘솔에 기록하거나, 전달받은 액션 정보를 기반으로 액션을 아예 취소하거나, 다른 종류의 액션을 추가하는 등 다양한 역할을 담당할 수 있습니다. 

 

미들웨어의 구조는 아래와 같습니다. 

 

const loggerMiddleware = store => next => action => {
  //기본 구조
}

export default loggerMiddleware;

const loggerMiddleware = function loggerMiddleware(store){
  return function(next){
    return function(action){
      //기본 구조
    }
  }
}

export default loggerMiddleware;

 

결국 함수를 반환하는 함수를 반환하는 함수입니다. 파라미터로 받아오는 store는 리덕스 스토어 인스턴스, action은 디스패치된 액션을 가리킵니다. 

 

미들웨어에서 사용되는 새로운 파라미터는 next 인데, 이는 함수형태이며 store.disapatch 와 비슷한 역할을 합니다. 차이점은 next(action)을 통해 다음 처리해야 할 미들웨어에게 액션을 넘겨주고, 만약 그 다음 미들웨어가 없다면 리듀서에게 액션을 넘겨줍니다.

 

🤔 리덕스 미들웨어는 왜 필요해?

기존의 리덕스는 액션이 발생하게 되면, 디스패치를 통해 스토어에게 상태 변화의 필요성을 알리게 됩니다. 하지만, 디스패치된 액션을 스토어로 전달하기 전에 처리하고 싶은 작업이 있을 수 있겠죠. 가령, 단순히 어떤 액션이 발생했는지 로그를 남길 수도 있겠고, 액션을 취소해버리거나, 또 다른 액션을 발생시킬 수도 있습니다.

 

우리가 알고 있는 리덕스는 동기적인 흐름을 통해 동작합니다. 액션 객체가 생성되고, 디스패치가 액션 발생을 스토어에게 알리면, 리듀서는 정해진 로직에 의해 액션을 처리한 후 새로운 상태값을 반환하는 과정이죠. 하지만, 동기적인 흐름만으로는 처리하기 힘든 작업들이 있습니다. 가령, 시간을 딜레이시켜 동작하게 한다던지, 외부 데이터를 요청하여 그에 따른 응답을 화면에 보여주어야 한다면 어떻게 처리해주어야 할까요?

 

리덕스에서는 이러한 비동기 작업을 처리하기 위한 지침을 알려주지 않고 있기 때문에 이러한 비동기 작업을 처리하는 데 있어 리덕스 미들웨어를 주로 사용합니다.

 

📃 리덕스 미들웨어로 비동기 작업 처리

리덕스 미들웨어로 비동기 작업을 수행해야 하는 경우는 매우 다양합니다. 가령, presentational component에 API로 요청한 정보를 출력해야 하는 액션이 발생할 경우, 처리하는 시간이 필요하기 때문에 이를 비동기 작업으로 수행하게 됩니다.

 

기존 리덕스의 workflow는 아래와 같습니다. 

 

비동기 작업을 해주는 미들웨어가 추가됐을 때의 리덕스의 workflow는 아래와 같습니다.

 

 

리덕스 미들웨어를 통해 비동기 작업을 처리할 때 사용하는 미들웨어는 오픈 소스 커뮤니티에 많이 공개되어 있습니다. 대표적인 미들웨어로는 redux-thunk와 redux-saga가 있습니다.

 

• redux-thunk : 리덕스 창시자인 댄 아브라모프가 만든 가장 많이 사용되는 비동기 작업 미들웨어입니다. 
• redux-saga : 전자 다음으로 가장 많이 사용되는 비동기 작업 미들웨어 라이브러리로, 특정 액션이 디스패치되었을 때 정해진 로직에 따라 다른 액션을 디스패치시키는 규칙을 작성하여 비동기 작업을 처리할 수 있게 해줍니다.