[Redux] 리덕스 미들웨어

이번 포스팅에서는 리덕스 미들웨어 작동 원리에 대해서 이해하기 위한 내용들을 정리하겠습니다.

리덕스 미들웨어

실무에서는 미들웨어를 실제로 만들어서 사용하는 경우는 거의 없다고 하지만, 간단한 미들웨어를 동작하고 적용시켜 보면 미들웨어가 전체 프로세스에서 어떤 역할을 하는지 알 수 있습니다.

아래의 코드는 미들웨어의 템플릿입니다. 미들웨어는 함수를 연달아 두 번 리턴하는 함수입니다.

const middleware = store => next => action => {
  // 작성하고자 하는 로직
}

function 키워드로 나타내면 다음과 같습니다.

function middleware(store) {
  return function (next) {
    return function (action) {
      // 작성하고자 하는 로직
    };
  };
};

• store : 스토어의 인스턴스로 내장함수로 dispatch, getState, subscribe를 가집니다.
• next : 액션을 다음 미들웨어에게 전달하는 함수입니다. 다음 미들웨어가 없을 경우 리듀서에게 액션을 전달 합니다.
  -> next(action) 형태로 사용합니다.
• action : 처리하고자하는 action 객체입니다.

스토어의 dispatch 함수로 액션을 전달하면 첫 번째로 등록한 미들웨어에서 action값을 이용한 로직을 처리하고 next 함수를 이용하여 다음 미들웨어로 전달하게 됩니다. 동일한 작업을 반복하며 다음 미들웨어가 없을 경우 리듀서에 액션값이 전달되고 변경된 state가 스토어에 반영 됩니다.

간단한 미들웨어 만들기

다음 코드는 미들웨어에서 action 값을 콘솔에 보여준 후 다음 미들웨어나 리듀서로 액션값을 넘겨주는 미들웨어입니다. 이렇게 전달 받은 action 값을 미들웨어에서 원하는 방식으로 사용이 가능합니다.

// myLogger.js
const myLogger = store => next => action => {
  console.log(action); // 액션 출력
  console.log("\t", store.getState()); // state 값 출력
  const result = next(action); // 다음 미들웨어 (또는 리듀서) 에게 액션을 전달
  
  return result; // 반환하는 값은 dispatch(action)의 결과물 / 기본: undefined
};

export default myLogger;

미들웨어 적용하기

RTK 환경에서 미들웨어를 적용해보도록 하겠습니다.툴킷에서 제공하는 기본 미들웨어들을 getDefaultMiddleware를 이용하여 호출한 후 또 다른 미들웨어를 concat을 이용해서 추가할 수 있습니다. 가독성을 높이기 위해 [...getDefaultMiddleware(), myLogger]로 표현할 수 도 있습니다.

import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
import myLogger from "./myLogger";
const store = configureStore({
  middleware: getDefaultMiddleware().concat(myLogger) 
// middleware: [...getDefaultMiddleware(), myLogger]
});

export default store;

Reference

https://react.vlpt.us/redux-middleware/02-make-middleware.html