redux 미들웨어에 대하여 ...

1. 미들웨어 넌 도대체 머니?

: 미들웨어는 중간다리 역할을 뜻한다. 즉 자세히 말하기 위해서 다음과 같은 예시가 있다고 하겠다.

액션 -> 리듀서 -> 스토어 이런 플로우를 가지고 redux의 상태관리가 진행된다고 하자. 여기서 미들웨어는 액션과 리듀서 사이에서 중간 다리로 액션에서 바로 리듀서를 거치지 않고 미들웨어에서 한번 중간 작업을 거치고 리듀서로 액션을 보내주는 역할을 의미한다.자 이제 미들웨어에 대해서 알게되었으니 그럼이제 redux 미들웨어를 언제 쓰는 지 살펴보자.

2. redux 미들웨어 그래서 언제 쓰는 데?

: redux 미들웨어는 내가 액션을 리듀서로 보내기 전에 어떤 작업을 하고 싶을 때 사용한다. 그러면 어떤 작업은 어떤 것들이 있을까?

대표적인 예시로는 비동기 작업이다. 즉 서버로 부터 데이터를 받아오는 작업이 미들웨어를 쓰는 대표적인 예시다. 그렇다고 해서 꼭 서버와의 연관성만 있는 것은 아니다. 액션에서 리듀서로 보내기 전에 보내는 액션을 로그로 남겨두고 싶을 때도 redux 미들웨어를 사용한다. 즉 로그를 남기고 싶을 때도 redux 미들웨어를 사용한다. 자 그럼 redux미들웨어를 쓰는 경우를 알아봤으니 실제로 어떻게 구현되는 지를 살펴보겠다.

3. redux 미들웨어는 어떻게 구현해?

예시로 저번에 redux에 대해서 설명할때 사용한 코드를 참고 하겠다.

export const increase = createAction(INCREASE);
export const decrease = createAction(DECREASE);

위 코드를 뜯어보면 다음과 같은 구조다.

export const increase = () => ({type : INCREASE});
export const decrease = () => ({type : DECREASE});

즉 이런 식으로 액션을 생성하는 함수이다. 아까도 말했다시피 redux 미들웨어는 액션과 리듀서 사이에 위치해있다고 했다.

즉 코드로 작성하면 다음과 같다.

export const increaseAsync = () => dispatch => {
  setTimeout(() => dispatch(increase()), 1000);
};
export const decreaseAsync = () => dispatch => {
  setTimeout(() => dispatch(decrease()), 1000);
};

위 코드를 해석하면 액션을 리듀서로 보내기 전에 1초를 기다리고 보내는 것을 확인할 수 있다. 그럼 이를 어떻게 dispatch할까?

  const onIncrease = () => {
    dispatch(increaseAsync());
  };
  const onDecrease = () => {
    dispatch(decreaseAsync());
  };

이처럼 객체나 값이 아니라 함수를 dispatch하는 것을 알 수 있다. 이는 굉장히 중요한 포인트이며 리덕스 미들웨어에 엄청난 장점이다.

왜냐하면 dispatch로 함수를 리턴하는 순간 그 함수에서는 dispatch를 하기 전에 내가 원하는 것을 자유롭게 할 수 있다는 것이다. 즉 내가 액션을 디스패치하기 전에 api로 부터 데이터를 받아서 보낼 수 도 로그를 찍을 수도 있고 정말 많은 것을 할 수 있다.