[React Redux] 리덕스 미들웨어

미들웨어란?

미들웨어는 액션과 리듀서의 중간 지점에 위치해 있는 놈이라고 보면 좋을듯합니다. 미들웨어는 액션이 디스패치 되어서 리듀서가 이를 실행하기 전에 액션을 캐치해서 특정한 작업을 수행하는 녀석입니다. 리듀서가 액션을 처리하기 전에, 미들웨어는 다양한 작업들을 수행할수 있습니다.

미들웨어 실습해보기!

미들웨어를 실습해보기 이전에 우선 git에서 리덕스 스타터 킷을 클론한 다음 npm 모듈들을 설치하여 프로젝트를 셋업 해봅시다!!

$ git clone https://github.com/vlpt-playground/redux-starter-kit.git
$ cd redux-starter-kit

// yarn 사용할 시
$ yarn install

//npm 사용할 시
$ npm install

로거 미들웨어 만들어보기!

실제 프로젝트를 작업할때는 미들웨어를 직접 커스텀으로 구축할 일은 그렇게 많지는 않습니다. 하지만 미들웨어를 더 잘 이해하기 위해서, 한번 로거로 커스텀 미들웨어를 만들어 봅시다 :)

우선 src/lib 디렉토리에, loggerMiddleware.js 파일을 생성해보세요!

처음 미들웨어를 만들때는 아래와 같이 구축합니다.

src/lib/loggerMiddleware.js

const loggerMiddleware = store => next => action => {
    /* 미들웨어 내용 */
}

여기서 next는 store.dispatch와 비슷한 역할을 하지만 아주 살짝 다른 부분이 있습니다. next(action)는 바로 리듀서로 넘기거나, 혹은 미들웨어가 존재한다면 미들웨어로 넘어가게 되어있습니다. 하지만, dispatch는 처음부터 액션이 디스패치 되는것이기 때문에 현재 미들웨어가 다시 한번 동작하게 됩니다.

그러면, 현재의 값을 기록하고, 방금 전달 받은 액션을 기록하고, 그 다음 리듀서를 거친 다음 값을 찍도록 하겠습니다.

src/lib/loggerMiddleware.js

const loggerMiddleware = store => next => action => {
    // 현재 스토어 상태값 기록
    console.log('현재 상태', store.getState());
    // 액션 기록
    console.log('액션', action);

    // 액션을 다음 미들웨어, 혹은 리듀서로 넘김
    const result = next(action);

    // 액션 처리 후의 스토어 상태 기록
    console.log('다음 상태', store.getState());
    console.log('\n'); // 기록 구분을 위한 비어있는 줄 프린트

    return result; // 여기서 반환하는 값은 store.dispatch(ACTION_TYPE) 했을때의 결과로 설정됩니다
}

export default loggerMiddleware; // 불러와서 사용 할 수 있도록 내보내줍니다.

미들웨어 적용하기!!

미들웨어는 보통 store를 설정하는 src/store.js 파일에서 적용을 합니다.
applyMiddleware를 사용하여 적용시킬수 있습니다.

src/store.js

import { createStore, applyMiddleware } from 'redux';
import modules from './modules';
import loggerMiddleware from './lib/loggerMiddleware';

// 미들웨어가 여러개인경우에는 파라미터로 여러개를 전달해주면 됩니다. 예: applyMiddleware(a,b,c)
// 미들웨어의 순서는 여기서 전달한 파라미터의 순서대로 지정됩니다.
const store = createStore(modules, applyMiddleware(loggerMiddleware))

export default store;

Redux-logger를 사용해봅시다

이전 섹션에서는 커스텀으로 미들웨어를 사용해 보았다면, 이번에는 조금 더 효과적인 리덕스 로거 모듈을 사용해봅시다.

설치하기

$ yarn add redux-logger

적용하기

import { createStore, applyMiddleware } from 'redux';
import modules from './modules';

import { createLogger } from 'redux-logger';

/* 로그 미들웨어를 생성 할 때 설정을 커스터마이징 할 수 있습니다.
   https://github.com/evgenyrodionov/redux-logger#options
*/
const logger = createLogger(); 

const store = createStore(modules, applyMiddleware(logger))

export default store;