React- 미들웨어 만들어보고 이해하기

미들웨어 만들어보고 이해하기

실무에서는 리덕스 미들웨어를 직접 만들게 되는 일은 거의 없지만 한번 직접 만들어보게 된다면 미들웨어가 어떤 역할인지 훨씬 쉽게 이해 할 수 있기 때문에 만들어 보는 것이다.

 

1. 리덕스 미들웨어의 템플릿

리덕스 미들웨어를 만들 땐 다음 템플릿을 사용한다.

const middleware = store => next => action => {
  // 하고 싶은 작업...
}

미들웨어는 결국 하나의 함수이다. 함수를 연달아서 두번 리턴하는 함수인 것인데. 화살표가 여러번 나타나는게 도대체 뭐지 하고 헷갈릴 수도 있을텐데 이 함수를 function 키워드를 사용하여 작성한다면 다음과 같다.

function middleware(store) {
  return function (next) {
    return function (action) {
      // 하고 싶은 작업...
    };
  };
};

이제 여기서 각 함수에서 받아오는 파라미터가 어떤 것을 의미하는지 알아보겠다.

첫번째 store는 리덕스 스토어 인스턴스이다. 이 안에 dispatch, getState, subscribe 내장함수들이 들어있다.

두번째 next 는 액션을 다음 미들웨어에게 전달하는 함수 이다. next(action) 이런 형태로 사용한다. 만약 다음 미들웨어가 없다면 리듀서에게 액션을 전달해준다. 만약에 next 를 호출하지 않게 된다면 액션이 무시처리되어 리듀서에게로 전달되지 않는다.

세번째 action 은 현재 처리하고 있는 액션 객체이다.

 

2. 미들웨어 직접 작성해보기

src 디렉터리에 middlewares 라는 디렉터리를 만들고, myLogger.js 라는 파일을 다음과 같이 작성한다.

middlewares/myLogger.js

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

지금은 단순히 전달받은 액션을 출력하고 다음으로 넘기는 작업을 구현했다.

 

3. 미들웨어 적용하기

이제 미들웨어를 스토어에 적용해본다. 스토어에 미들웨어를 적용 할 때에는 applyMiddleware 라는 함수를 사용 한다.

index.js를 다음과 같이 수정하자.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
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(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);
 
reportWebVitals();

 

 

App.js

import React from 'react';
import CounterContainer from './containers/CounterContainer';
 
function App() {
  return <CounterContainer />;
}
 
export default App;

실행 결과

이렇게 카운터 버튼을 눌렀을 때 콘솔창에 액션이 잘 출력 되면 미들웨어가 잘 적용된 것이다.

 

4. 미들웨어 수정하기

미들웨어를 조금 더 수정해자. 만약 액션이 리듀서까지 전달되고 난 후의 새로운 상태를 확인하고 싶다면 다음과 같이 수정 할 수 있다.

const myLogger = store => next => action => {
  console.log(action); // 먼저 액션을 출력한다.
  const result = next(action); // 다음 미들웨어 (또는 리듀서) 에게 액션을 전달한다.
 
  // 업데이트 이후의 상태를 조회합니다.
  console.log('\t', store.getState()); // '\t' 는 탭 문자 이다.
 
  return result; // 여기서 반환하는 값은 dispatch(action)의 결과물이 된다. 기본: undefined
};
 
export default myLogger;

 

실행 결과

업데이트 후의 상태가 잘 나타나는 것을 볼 수 있다.