[redux] 미들웨어

이전에 express 공부를 하면서 미들웨어에 대해 정리를 했었는데 리덕스에서도 미들웨어가 있다고 해서 정리해 보려 한다.

 

1. 미들웨어란?

express에서 미들웨어는 서버가 요청을 받으면 해당 요청에 대한 응답 이전에 원하는 추가 작업을 미들 웨어를 통해 진행할 수 있었는데 리덕스에서 미들웨어는 이와 마찬가지로 리듀서가 호출되기 전에 미들웨어를 실행함으로써 추가 동작을 미리 할 수 있도록 해준다.

 

2. 사용 방법

 - 미들 웨어를 사용하기 위해서는 미들 웨어를 만들고 해당 미들웨어를 스토어에 적용해야 한다.

스토어에 미들웨어를 추가하기 위해서는 applyMiddleware 함수를 사용하여 가능하다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './modules';
import myLogger from './middlewares/myLogger';

const store = createStore(rootReducer, applyMiddleware(myLogger));

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

위 코드에서 myLogger 라는 미들 웨어를 applyMiddleware 함수를 이용하여 호출하는 모습이다.

 

 - 미들 웨어는 스토어를 호출하고 store를 파라미터 값으로 받고 내부 클로저 함수로 next 함수를 받아 action을 다음 미들웨어나 리듀서에게 액션을 전달할 수 있다.

const myLogger = store => next => action => {
  console.log(action); // 먼저 액션을 출력합니다.
  const result = next(action); // 다음 미들웨어 (또는 리듀서) 에게 액션을 전달합니다.
  return result; // 여기서 반환하는 값은 dispatch(action)의 결과물이 됩니다. 기본: undefined
};

export default myLogger;

 위와 같이 사용하면 result에 next에 들어온 함수에 action을 전달한 실행 결과 값을 대입하고, 즉 다음 미들웨어에 엑션을 전달한다라고 볼 수 있고 해당 결과 값을 리턴함으로써 미들웨어 함수를 종료할 수 있다.

 

- 리덕스 미들웨어는 주로 라이브러리를 설치하여 사용한다. 관련된 미들웨어 라이브러리에는 redux-thunk, redux-saga, redux-observable, redux-promise-middleware등이 있다.

 

3. 미들웨어 특징

 - 액션을 함수로 받아올 수 있다.

 - 비동기 코드를 작성할 수 있다.

 - 리듀서에서는 API 호출을 제한하는데 미들웨어에서는 가능하다.

 - 여러개의 미들웨어를 연결하여 사용 가능하다.

 - 조건에 따라 액션이 무시되게 만들 수 있다.

 

컨디션이 너무 안좋아서 깊게 이해하지 못하고 일단 대충 정리해봤다.

다음에 코드도 쳐보고 해서 완벽하게 이해하고 다시 정리해야겠다...