리덕스 미들웨어

특정 조건에 따라 액션 무시 및 추가 작업, 수정, 로깅, 트리거 액션, 함수 호출 등을 수행하도록 할 수 있다.

비동기 관련 미들웨어 라이브러리로 많이 사용되는 것은 redux-thunk, redux-saga가 있다.

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

• 미들웨어의 동작 시점 자체는 액션이 리듀서에 적용되기 전에 작동한다.
  • 해당 액션이 리듀서에 도착전에 특정한 작업이나 수정이 일어날 때 사용함
  • 액션의 payload에 값을 영향을 주거나 API 요청을 보내서 값을 반환하거나 등

/* 이러한 형태로 미들웨어를 작성하게 된다. */
const middleware = store => next => action => {
    // 미들웨어 수행 내용
}

/* 이런 의미를 가진다. */
function middleware(store) {
    return function(next) {
        return function(action) {
            // 미들웨어 수행 내용
        }
    }
}

• 로그 출력 미들웨어

const consoleLoggingMiddleware = (store) => (next) => (action) => {
    console.log(action); // 액션을 출력하는 로그 기능을 만듦
    const result = next(action); // 다음 미들웨어 혹은 리듀서에게 액션을 전달한다.

    return result; // next의 반환값(state결과값)을 반환
};

/* ---------------------------------------------------------- */
  const { createStore, applyMiddleware } = Redux;

  const store = createStore(reducer, applyMiddleware(consoleLoggingMiddleware));

특정 작업을 하는 미들웨어를 만든 후 Store 에 리듀서 함수 등록 시점에 같이 등록처리 한다.

• next를 호출 해야 다음 단계가 진행 되는 구조

Redux-Logger

로깅 미들웨어로 가장 많이 사용되는 미들웨어이다.

• 미들웨어 중 가장 늦게 실행되도록 세팅이 되어 있음

<script src="<https://unpkg.com/[email protected]/dist/redux-logger.js>"></script>

const logger = reduxLogger.createLogger();

/* ---------------------------------------------- */
const store = createStore(reducer, applyMiddleware(consoleLoggingMiddleware, logger));
// 미들웨어는 여러개 설정할 수 있음