리덕스 미들웨어

액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들을 실행한다.
미들웨어는 액션과 리듀서 사이의 중간자라고 볼 수 있다.

액션 -> 미들웨어 -> 리듀서 -> 스토어

리듀서가 액션을 처리하기 전에 미들웨어가 할 수 있는 작업은 여러 가지가 있다. 전달받은 액션을 단순히 콘솔에 기록하거나, 전달받은 액션 정보를 기반으로 액션을 아예 취소하거나, 다른 종류의 액션을 추가로 디스패치할 수도 있다.

미들웨어 만들기

실제 프로젝트를 작업할 때 미들웨어를 직접 만들어서 사용할 일은 그리 많지 않다. 다른 개발자가 만들어 놓은 미들웨어를 사용하면 되기 때문이다. 하지만 미들웨어가 어떻게 작동하는지 이해하려면 직접 만들어 보는 것이 가장 효과적이다. 간단한 미들웨어를 직접 만들어 보면 미들웨어의 작동 방식을 제대로 이해할 수 있다.
액션이 디스패치될 때마다 액션의 정보와 액션이 디스패치되기 전후의 상태를 콘솔에 보여 주는 로깅 미들웨어를 작성해보자.

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

export default loggerMiddleware;

위 코드에서 리덕스 미들웨어의 구조를 볼 수 있다. 화살표 함수를 연달아서 사용했는데, 일반 function 키워드로 풀어쓰면 다음과 같은 구조이다.

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

미들웨어는 결국 함수를 반환하는 함수를 반환하는 함수이다.여기에 있는 함수에서 파라미터로 받아 오는 store는 리덕스 스토어 인스턴스를, action은 디스패치된 액션을 가르킨다.

두 가지 값은 익숙하지만 next는 익숙하지 않다. next 파리미터는 함수 형태이며 store.dispatch와 비슷한 역할을 한다. 하지만 큰 차이점이 있는데 next(action)을 호출하면 그 다음 처리해야 할 미들웨어에게 액션을 넘겨주고, 만약 그 다음 미들웨어가 없다면 리듀서에게 액션을 넘겨준다.

const loggerMiddleware = (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;