Middleware

Middleware는 Reducer에서 Acrion을 Dispatch 하기전 사전에 지정된 작업을 실행

Middleware는, Action이 Dispatch되어서 Reducer에서 이를 처리하기전에 사전에 지정된 작업들을 설정한다.

즉 Middleware는 Action과 Reducer 사이의 중간자이다.

Devtools

Devtools는 Action의 History를 확인

Redux Devtools는 크롬 확장프로그램으로 Redux Action의 History를 확인할 수 있다.

History 내역을 기록하기 위해서는 Redux에 Middleware를 추가해야하는데 사용방법은 다음과 같다.

Devtools 사용방법

1. 아래 npm명령어를 통해 브라우저와 개발자코드를 연동

npm i redux-devtools-extension

2. configureStore.js파일에서 Middleware와 Devtools를 연결

// store/configureStore.js
import { applyMiddleware, createStore, compose } from 'redux';
import { createWrapper } from 'next-redux-wrapper';
import { composeWithDevTools } from 'redux-devtools-extension';

import reducer from '../reducers/index';

const configureStore = () => {
  const middlewares = [];
  const enhancer = process.env.NODE_ENV === 'production'
    ? compose(applyMiddleware(...middlewares))
    : composeWithDevTools(applyMiddleware(...middlewares))
  const store = createStore(reducer, enhancer);
  return store; 
};

const wrapper = createWrapper(configureStore, {
  debug: process.env.NODE_ENV === 'development' 
});

export default wrapper;

Devtools를 사용하면서 History 내역이 쌓이게되면 메모리를 많이 차지하고 중앙 데이터의 내역이 전부 표시되기 때문에 보안에 취약하다.

그래서 배포용일때는 Devtools를 연결하지 않고, 개발용일때만 Devtools를 연결하는 것을 권장한다.

composeWithDevTools(applyMiddleware([...middlewares])) // 개발용
compose(applyMiddleware([...middlewares])) // 배포용

참고 자료

Redux 공식문서
React로 NodeBird SNS 만들기 - 제로초