18. 리덕스 미들웨어를 통한 비동기 작업 관리(1)

• 리액트 웹 애플리케이션에서 API 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 합니다.
• 예를 들어 요청이 시작되었을 때는 로딩 중임을, 요청이 성공하거나 실패했을 때는 로딩이 끝났음을 명시해야 합니다.
• 요청이 성공하면 서버에서 받아 온 응답에 대한 상태를 관리하고, 요청이 실패하면 서버에서 반환한 에러에 대한 상태를 관리해야 합니다.
• 리액트 프로젝트에서 리덕스를 사용하고 있으며 이러한 비동기 작업을 관리해야 한다면, ‘미들웨어(middleware)’를 사용하여 매우 효율적이고 편하게 상태 관리를 할 수 있습니다.

미들웨어란?

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

• 리듀서가 액션을 처리하기 전에 미들웨어가 할 수 있는 작업은 여러 가지가 있습니다.
• 전달받은 액션을 단순히 콘솔에 기록하거나, 전달받은 액션 정보를 기반으로 액션을 아예 취소하거나, 다른 종류의 액션을 추가로 디스패치할 수도 있습니다.
• 여기서는 액션이 디스패치될 때마다 액션의 정보와 액션이 디스패치되기 전후의 상태를 콘솔에 보여 주는 로깅 미들웨어를 작성해 보겠습니다.
• src 디렉터리에 lib 디렉터리를 생성하고, 그 안에 loggerMiddleware.js 파일을 생성하세요.

const loggerMiddleware = store => next => action => {
  // 미들웨어 기본 구조
};

export default loggerMiddleware;

• 위 코드에서 리덕스 미들웨어의 구조를 볼 수 있습니다.
• 화살표 함수를 연달아서 사용했는데, 일반 function 키워드로 풀어서 쓴다면 다음과 같은 구조입니다.

const loggerMiddleware = function loggerMiddleware(store) {
return function(next) {
  return function(action) {
    // 미들웨어 기본 구조
  };
};
};

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

• 이제 미들웨어를 마저 구현해 봅시다.
• 이번에 만들 미들웨어는 다음 정보를 순차적으로 콘솔에 보여 줍니다.

1. 이전 상태

2. 액션 정보

3. 새로워진 상태

const loggerMiddleware = store => next => action => {
  console.group(action && action.type); // 액션 타입으로 log를 그룹화함
  console.log(‘이전 상태‘, store.getState());
  console.log(‘액션‘, action);
  next(action); // 다음 미들웨어 혹은 리듀서에게 전달
  console.log(‘다음 상태‘, store.getState()); // 업데이트된 상태
  console.groupEnd(); // 그룹 끝
};

export default loggerMiddleware;

• 미들웨어에서는 여러 종류의 작업을 처리할 수 있습니다.
• 특정 조건에 따라 액션을 무시하게 할 수도 있고, 특정 조건에 따라 액션 정보를 가로채서 변경한 후 리듀서에게 전달해 줄 수도 있습니다.
• 아니면 특정 액션에 기반하여 새로운 액션을 여러 번 디스패치할 수도 있죠.

비동기 작업을 처리하는 미들웨어 사용

• redux-thunk: 비동기 작업을 처리할 때 가장 많이 사용하는 미들웨어입니다. 객체가 아닌 함수 형태의 액션을 디스패치할 수 있게 해 줍니다.
• redux-saga: redux-thunk 다음으로 가장 많이 사용되는 비동기 작업 관련 미들웨어 라이브러리입니다. 특정 액션이 디스패치되었을 때 정해진 로직에 따라 다른 액션을 디스패치시키는 규칙을 작성하여 비동기 작업을 처리할 수 있게 해 줍니다.