Redux 미들웨어란?

Redux 미들웨어(Middleware)

회사에서 처음으로 Redux 미들웨어를 이용해서 프로젝트를 만들 일이 생겨 기존에 미들웨어로 작성된 프로젝트를 보는데 아무리 봐도 코드 구조가 이해가 안 돼서 한참을 눈이 빠지게 들여다봤다. 

Redux 미들웨어가 무엇인지, 왜 사용하는지에 대한 개념은 전혀 어렵지가 않은데, 실제로 코드를 구성하려고 보면, 코드가 다 Split 되어 있고, 여러 파일들이 구조적으로 분할되어 엮여있다보니 아예 모르는 상태에서 처음 파악하기에는 이해가 되지 않았다. 

 

Redux를 사용할 줄 안다는 기본 가정 하에, Redux는 store, action, reducer의 구조로 이루어져 있고, 단일 store에 전역 상태를 관리하고, action 에 담겨진 명령어로 reducer에 원하는 상태 변경을 dispatch 해서 store에 담는 구조로 되어 있다.

action => reducer => store

이 때, reducer에서 반환하는 상태 변경 전에 어떠한 동작을 처리하고 싶을 경우에 미들웨어를 사용하게 된다. 가령, setTimeout을 이용해서 1초 뒤에 디스패치가 되게 만들거나, 디스패치 전에 들어온 액션 타입을 콘솔에 표시하거나, 디스패치 전에 비동기 데이터 요청을 한 뒤 받아온 데이터를 전역 상태에 담거나 하는 추가적인 동작을 처리하려면 미들웨어를 이용하면 된다. 

action => middleware => reducer => store

Redux 미들웨어 사용방법

Redux 미들웨어는 src/index.js 에서 Redux store를 생성하는 부분의 두번째 인자에 넣어 적용시킬 수 있다. 보통 미들웨어로 적용할 파일을 만들거나, redux-logger, redux-thunk와 같은 패키지들을 선언해준다. 미들웨어는 콤마로 구분해서 여러 개 적용할 수 있다.

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { applyMiddleware, createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './modules';
import logger from 'redux-logger';
import ReduxThunk from 'redux-thunk';

const store = createStore(rootReducer, applyMiddleware(ReduxThunk, logger));

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

redux-logger

npm i redux-logger

redux-logger는 dispatch가 될 때 action 타입과 변경 전 상태와 변경 후 상태를 예쁘게 콘솔에 출력해주는 패키지다. redux를 통해 변경되는 상태를 추적할 때 (개발자 입장에서) 좋은 툴이다.

redux-logger

redux-thunk

npm i redux-thunk

redux-thunk는 가장 많이 사용되는 미들웨어로 비동기 작업을 처리할 때 용이하다. redux-thunk를 사용하면 dispatch 할 때, 액션 타입 객체가 아니라 함수를 디스패치 할 수 있다.

// actions.js

// 액션 타입
const INCREASE = 'INCREASE';
const DECREASE = 'DECREASE';

// 액션 생성 함수
export const increase = () => ({ type: INCREASE });
export const decrease = () => ({ type: DECREASE });

// redux-thunk를 이용하여 액션을 디스패치 하기 전에 setTimeout 비동기 동작을 하는 함수를 디스패치 하도록 만들 수 있다. 
export const increaseAsync = () => dispatch => {
  setTimeout(() => dispatch(increase()), 1000);
};
export const decreaseAsync = () => dispatch => {
  setTimeout(() => dispatch(decrease()), 1000);
};