1. 미들웨어(Middleware)

• 미들웨어는 리덕스를 사용하면서 비동기 작업을 다룰 때 사용한다.

• 미들웨어는 액션이 디스패치(dispatch) 되어서 리듀서에서 이를 처리하기전에 사전에 지정된 작업들을 설정한다. 미들웨어는 액션과 리듀서 사이의 중간자 역할을 한다.

1) 미들웨어 만들기

• next는 store.dispatch와 비슷한 역할을 하는데, 다른점은 next(action)을 했을 때는 바로 Reducer로 넘기거나, 미들웨어가 더 있다면 다음 미들웨어 처리가 되도록 진행된다. 하지만 store.dispatch의 경우에는 처음부터 다시 Action이 Dispatch 되는 것이기 때문에 현재 미들웨어를 다시 한번 처리하게 된다.

기본 문법

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

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;

2) 미들웨어 적용하기

• 미들웨어는 store를 생성할 때 적용하는데 redux 모듈 안에 있는 applyMiddelware를 사용하여 설정 할 수 있다.

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

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

export default store;