미들웨어(Middleware)란?

 

 

미들웨어(Middleware)란?

액션(action)과 리듀서(reducer) 함수 사이의 중간자라고 하며, 미들웨어를 통해 전달받은 액션을 콘솔에 기록하거나 취소 혹은 다른 종류의 액션을 추가적으로 디스패치(dispatch)할 수 있다.

단, 미들웨어를 설정하지 않는다면 액션은 바로 리듀서에게 보내진다.

 

리덕스(Redux)에서의 미들웨어는?

리덕스에서 미들웨어는 액션을 디스 패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들을 실행한다.

이미지 출처: https://pathas.tistory.com/226

리덕스 미들웨어의 구조

// 미들웨어 기본 구조
const loggerMiddleware = store => next => action => {
	// 하고자 하는 작업
};

위 코드는 화살표 함수를 연달아서 사용했는데, 일반 function 키워드로 풀어서 쓴다면 다음과 같은 구조이다.

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

미들웨어는 결국 함수를 반환하고 함수를 반환하는 하나의 함수이다.

 

여기에 있는 함수의 파라미더들은 어떤 역할을 하는가?

store

리덕스 스토어 인스턴스이며 애플리케이션의 전역 상태이고, dispatch, getState, subscribe 등 내장 함수들이 존재한다.

next

액션을 다음 미들웨어에게 전달하는 함수이며, next(action) 형태로 사용한다.

next(action)을 호출하면 그다음 처리해야 할 미들웨어에게 액션을 넘겨주고, 만약 그다음 미들웨어가 없다면 리듀서에게 액션을 넘겨주는 형태이다.

action

action은 현재 처리하고 있는 액션 객체를 의미한다.

미들웨어 적용해보기

// index.js
import React from "react";
import ReactDOM from "react-dom";
import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import "./index.css";
import App from "./App";
import rootReducer from "./moudles";
import loggerMiddleware from "./loggerMiddleare/loggerMiddleware";

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

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

// loggerMiddleware.js
const loggerMiddleware.js = (store) => (next) => (action) => {
  console.group(action && action.type);
  console.log("이전 상태", store.getState());
  console.log("액션", action);
  next(action);
  console.log("다음 상태", store.getState());
  console.groupEnd();
};

export default loggerMiddleware;

콘솔창에서 다음과 같이 전달받은 액션들이 된다.

하지만 이렇게 미들웨어를 만들어서 사용해도 되지만, 오픈 소스 커뮤니티에 이미 올라와 있는 redux-logger를 사용하는 것이 훨씬 좋다.

방금 만든 loggerMiddleware보다 훨씬 더 잘 만들어진 라이브러리이며, 브라우저 콘솔에 나타나는 형식도 훨씬 깔끔하기 때문에 많이 사용한다.

redux-logger