실무에서는 리덕스 미들웨어를 직접 만들게 되는 일은 거의 없는데 하지만, 한 번 직접 만들어보게 된다면

미들웨어가 어떤 역할인지 훨씬 쉽게 이해 할 수 있다.

리덕스 미들웨어 템플릿

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

미들웨어는 결국엔 또 하나의 함수이다 함수를 연달하서 두 번 리턴하는 함수이다.

위 코드에서 화살표 함수를 여러 번 나타내는 의미를 function 키워드로 나타내어보기

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

stroe, next, action 파라미터의 의미

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

• subscribe가 무엇이었을까요?

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

만약 다음 미들웨어가 없다면 리듀서에게 액션을 전달해준다. 만약에 next 를 호출하지 않게 된다면

액션이 무시처리되어 리듀서에게로 전달되지 않는다.

세번째 action 은 현재 처리하고 있는 액션 객체를 나타낸다.

미들웨어의 작동 구조

리덕스 스토어에는 여러 개의 미들웨어를 등록할 수 있다.

새로운 액션이 dispatch 되면 첫 번째로 등록한 미들웨어가 호출된다.

만약에 미들웨어에서 next(action)을 호출하게 되면 다음 미들웨어로 액션이 넘어간다.