Redux Middleware

리덕스 미들웨어는 리액트 앱과 스토어 사이에 존재한다

# Redux Thunk

redux-thunk는 리덕스 미들웨어로서 원하는 시간대에 응답에 맞는 액션을 보낼 수 있게 해준다.

설치

#> yarn add redux-thunk

미들웨어는 스토어 설정파일에 설정하고, createStore를 할 때 middleware인자로 보내주면 된다.

import { createStore, combineReducers, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import users from 'redux/modules/users';

// global middleware
const middlewares = [thunk]

const reducer = combineReducers({
    users
})
let store = initialState => 
    createStore(reducer,applyMiddleware(...middlewares));
export default store();

다음과 같은 스토어 설정파일이 있고, 그 안에 설치한 redux-thunk를 가져와서 미들웨어로 사용한다.

그리고 마지막에 createStore를 할 때 middleware로 지정해주면 된다.(applyMiddleware를 사용해서)

그런데 미들웨어를 그냥 변수로 저렇게 설정해버리면 global middleware로 설정을 하는것.

즉 개발환경이나 배포환경이나 다 사용할 수 있다

# Redux Logger



redux logger는 리액트 앱에서 동작하는 리덕스의 액션을 콘솔로 보기 좋게 출력해주는 라이브러리.

redux-logger 미들웨어는 개발환경에서만 동작하는 과정을 보기 위해서 사용하는 것이기 때문에

글로벌 미들웨어 설정과는 약간 다르게 한다.

설치

#> yarn add redux-logger --dev 

개발환경에서만 사용되기 때문에 --dev 옵션을 주고 설치한다

const env = process.env.NODE_ENV;    // 현재 앱이 동작하는 환경이 무엇인지( dev / prod )

// global middlewareconst middlewares = [thunk]

// middleware only on development envif(env === "development"){    const { logger } = require("redux-logger");    // 상단에서 임포트를 할 수 있지만, 개발환경이 아닌 상황에서
    middlewares.push(logger);                    계속 임포트 하는 것은 불필요.
}


let store = initialState => createStore(reducer,applyMiddleware(...middlewares));

다음과 같이 process를 통해서 현재 환경을 알아내고, 개발환경이라면 middlewares에 추가하는 방식을 사용하면 된다.

조건문 내에서 필요한 미들웨어를 가져오는 이유는 개발환경이 아니면 괜히 필요없는 것을

로드하면 서비스만 무거워지기 때문이다.

다음과 같이 콘솔창에서 어떤 액션이 디스패치 되었고 어떤 결과를 낳았는지 간편하게 확인 할 수 있다.