리덕스 미들웨어

리덕스 미들웨어란?

 

가장 자주 볼 수 있는 그림이 있습니다.

액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서

사전에 지정된 작업들을 실행합니다.

 

미들웨어는 액션과 리듀서 사이의 중간자라고 볼 수 있습니다.

 

리듀서가 액션을 처리하기 전에

미들웨어가 할 수 있는 작업은 여러가지가 있습니다.

1. 액션을 단순히 콘솔에 기록하거나

2. 전달 받은 액션 정보를 기반으로 액션을 아예 취소하거나,

3. 다른 종류의 액션을 추가로 디스패치할 수도 있습니다.

 

 

보통 리덕스에서 미들웨어를 사용하는 주된 사용 용도는 비동기 작업을 처리 할 때 입니다.

예를 들어 리액트 앱에서 우리가 만약 백엔드 API 를 연동해야 된다면, 리덕스 미들웨어를 사용하여 처리하곤 하죠.

 

리덕스 미들웨어는 누구든지 만들어서 사용 할 수 있습니다만,

일반적으로는 리덕스 미들에웨어 라이브러리를 설치하여 사용합니다.

 

비동기 작업에 관련된 미들웨어 라이브러리는 

redux-thunk, redux-saga, redux-observable, redux-promise-middleware 등이 있습니다.

 

redux-saga와 redux-observable의 경우엔 특정 액션을 모니터링 할 수도 있으므로,

특정 액션이 디스패치됐을때 원하는 함수를 호출하거나, 또는 라우터를 통해 다른 주소로 이동하는 것이 가능합니다.

 

 

 

 

 

미들웨어를 알아봤으니 어떻게 사용하는지 공부해보도록 하겠습니다.

---

사실 미들웨어는 직접 만들어서 사용할 일은 그리 많지 않습니다..

다른 개발자가 만들어 둔 미들웨어를 사용하면 되기 때문이지용 ㅎㅎㅎ

 

하지만!!

어떻게 작동하는지 알고는 있어야 고쳐쓸 수 있기 때문에 기록하고 공부해두도록 하겠습니다.

 

const jeongseoMiddleware = store => next => action => {
  // 미들웨어 기본 구조
};

export default jeongseoMiddleware;

 

위 코드는 화살표 함수를 연달아서 사용했는데,

일반 function 키워드로 풀어서 쓴다면 아래와 같습니다.

const jeongseoMiddleware = function jeongseoMiddleware(store){
  return function(next){
    return function(action){
    // 미들웨어 기본 구조
    };
  };
};

 

미들웨어는 결국 함수를 반환하는 함수입니다.

여기에 있는 함수에서 파라미터로 받아 오는 store는 리덕스 스토어 인스턴스를,

action은 디스패치된 액션을 가리킨다.

next는 파라미터는 함수 형태이며, store.dispatch와 비슷한 역할을 한다.

 

하지만, 

큰 차이점이 있다.

next(action)을 호출하면 그 다음 처리해야할 미들웨어에게 액션을 넘겨주고,

만약 그 다음 미드웨어가 없다면  리듀서에게 액션을 넘겨준다는 것입니다.

 

미들웨어 내부에서 store.dispatch를 사용하면 첫 번째 미들웨어부터 다시 처리합니다.

만약 미들웨어에서 next를 사용하지 않으면 액션이 리듀서에 전달되지 않습니다.

 

즉, 액션이 무시됩니다.

 

 

---

1.  redux-thunk

비동기 작업을 처리할 때 가장 많이 사용하는 미들웨어다.

객체가 아닌 함수 형태의 액션을 디스패치할 수 있게 한다.

 

Thunk란?

특정 작업을 나중에 할 수 있도록 미루기 위해 함수 형태로 감싼 것을 의미한다.

예를 들어서 코드를 한번 봐보자.

const addOne = x => x + 1;
addOne(1); // 2

위 코드를 실행하면 addOne을 호출 했을 때 바로 1+1 이 시행된다.

그런데 이 작업을 나중에 하도록 미루려면 ?

👇

const addOne = x => x + 1;
function addOneThunk(x) {
  const thunk = () => addOne(x);
  return thunk;
}

const fn = addOneThunk(1);
setTimeout(() => {
  const value = fn(); // fn이 실행되는 시점에 연산
  console.log(value);
}, 1000);

이렇게 하면 특정 작업을 나중에하도록 미룰 수 있습니다.

 

화살표 함수로만 사용한다면 다음과 같습니다.

👇

const addOne = x => x + 1;
const addOneThunk = x => () => add One(x);

const fn = addOneThunk(1);
setTimeout(() => {
  const value = fn(); // fn이 실행되는 시점에 연산
  console.log(value);
}, 1000);

 

redux-thunk 라이브러리를 사용하면 thunk 함수를 만들어서 디스패치할 수 있습니다.

그러면 리덕스 미들웨어가 그 함수를 전달받아 store의 dispatch와 getState를 파라미터로 넣어서 호출해줍니다.