Intro

이전까지는 미들웨어가 무엇인지 제대로 이해하지 못한 상태로 redux-logger, redux-thunk 같은 third party 미들웨어를 사용했다. 하지만 미들웨어가 무엇이고, 왜 사용하는지 갑자기 의문이 들어 공부를 시작했고, 포스팅을 통해 그 내용을 남기려 한다.

Redux의 상태관리와 미들웨어

미들웨어를 이해하기 전에, Redux의 상태관리에 대해서 자세히 알아야 한다.

Redux의 상태관리 매커니즘

Redux에서는 Action Creator를 통해 액션 객체를 생성한 뒤, dispatch를 통해 액션을 reducer에 전달해준다.

(dispatch를 사용하지 않으면, reducer가 동작하지 않는다. 왜냐하면 store는 읽기 전용 상태이기 때문에 dispatch를 해주지 않으면 값을 변경하지 않기 때문이다.)

미들웨어, 이름 그대로 middle에 끼어있다.

미들웨어는 action이 reducer에 전달되는 과정의 사이에서 동작하는 코드다.

미들웨어의 barebone

store는 store 객체를 뜻한다, next는 여러 개의 미들웨어가 있다면 다음의 middleware 함수를 의미한다.

신기한 점은, 다음 middleware가 없을 시에는 dispatch로 동작한다.

미들웨어의 적용방법은 store 생성 시, redux의 내장함수인 applyMiddleware를 통해 적용이 가능하다.

아래는 나의 todolist에 적용한 커스텀 미들웨어다.

const middleware = (store) => (next) => (action) => {
  if (action.type === "DELETE_TODO") {
    if (window.confirm("Are you sure?")) {
      next(action);
    }
  } else {
    next(action);
  }
};

액션의 타입이 todo를 삭제하는 "DELETE_TODO"라면 window.confirm을 통해 한 번 더 삭제할 건지 확인하기 위한 로직이다.

if문을 통해, "DELETE_TODO" 타입인지 검사한 뒤 confirm을 통해 true/false 값을 얻는다.

그에 따라 next (여기서는 dispatch)를 통해 액션을 디스패치 해준다.