리덕스 미들웨어

리덕스 미들웨어

action은 기본적으로 동기이다. action이 객체고 dispatch는 그냥 객체를 받아서 dispatch하는 역할이기 때문에 그 사이에 비동기가 들어갈 틈이 없다. 비동기를 하기 위해서는 미들웨어를 사용해야 한다. dispatch와 reducer 사이에 동작하는게 미들웨어이다. 리덕스 미들웨어로는 redux-thunk, redux-saga를 가장 많이 사용한다. 무조건 비동기를 위해서만 미들웨어를 사용하지는 않는다. 예를 들어 미들웨어에서 로깅도 할 수 있다.

const store = createStore(reducer, initialState, enhancer);

위 매개변수의 순서가 정해져있다. enhancer가 store를 "덧붙이거나 증강시킨다"라는 의미이다. 따라서 enhancer를 통해 기능이 증가된다.

 

-enhancer

const enhancer = compose(applyMiddleware());

이렇게 선언할 수 있고 compose는 굳이 쓰기 않아도 된다. compose는 합성하는 함수이다. 

const enhancer = compose(applyMiddleware(), devtool);

이렇게 리덕스에서 나오는 action, dispatch되는 것들, state를 쉽게 볼 수 있게 해주는 크롬 확장 플러그인인 devtool을 연결하는 경우에 compose를 사용한다. compose는 어떻게 보면 combineReducer와 비슷한 역할을 한다.

 

-firstMiddleware

const firstMiddleware = (store) => (next) => (action) => {};

function firstMiddleware(store) {
  return function (next) {
    return function (action) {
        
    };
  };
}

firstMiddleware는 맨 위에 있는 화살표 함수처럼 쓴다. 이것을 쉽게 나열한 것이 아래 함수이다. 따라서 store와 next 사이에서 처리해야 할 것이 있으면 처리를 해줄 수 있다. 그리고 next와 action 사이에서도 할 것이 있으면 처리할 수 있다.

 

const firstMiddleware = (store) => (dispatch) => (action) => {
  console.log('액션 로깅', action); //부가 기능
  // dispatch 하기 전 기능 추가
  dispatch(action); //기본 기능
  // dispatch 하고 기능 추가
};

const enhancer = applyMiddleware(firstMiddleware);

이렇게 가운데에 dispatch가 있다고 생각하면 된다. 미들 웨어는 dispatch와 reducer 사이에 있는데, dispatch와 reducer 사이의 기본 동작은 dispatch(action)한 것을 전달하는 것이다. 따라서 firstMiddleware 함수에 dispatch(action)을 넣으면 그냥 기본 동작을 하는 것이다. 그리고 console.log는 부가 기능이 추가된 것이라고 보면된다. 이를 활용해 비동기 처리가 가능하다.

혹은 dispatch(action) 앞뒤에 dispatch 전후에 따른 기능 추가가 가능하다.