[Redux]미들웨어(middleware)

🤔 미들웨어는 무엇인가?

action에서 선언된 state를 변경하는 부분이 dispatch를 통해 실행되기 전에 동작한다.

즉, action 과 dispatch 사이에서 일어나는 동작을 제어하는 도구라고 이해하면 되겠다.

비동기를 구현할 때 용이하며, 리덕스에 비동기 관리 tool로는 redux-thunk, redux-saga 정도가 있다.

 

[기본 템플릿]

const middleware = store => next => action => {
  (1)
  next(action) //기본 기능 : action이 dispatch를 통해 실행된다.
  (2)
}

함수가 중첩된 형태이다. 파라미터가 3개 이고 return 문이 2개인 고차함수 형태이다.

이를 function 으로 다시 작성해본다면,

function middleware(store) {
  return function (next) {
    return function (action) {

    };
  };
};

* store : 리덕스의 store 인스턴스 (createStore로 선언하는 부분)

* next : dispatch와 같다고 봐도 무방하다.

              action을 실행시키는 기본 기능은 next(action) 이다.

* action : state 변경 내용을 담는 객체

 

미들웨어를 통해 dispatch 전/후로 비동기를 컨트롤 할 수 있게 된다.

 

✨ 미들웨어 직접 사용해보기

* store 선언시 enhancer 사용

enhance + -er : 향상시키다/높이다 

👉 기존의 리덕스의 기능을 확장시켜서 기능을 향상시키는 옵션이라고 볼 수 있다.

enhancer를 이용해서 미들웨어를 실행한다.

 

* 미들웨어 선언

const middleware = (store) => (next) => (action) => {
    console.log('action start', action);
    //기능 추가 ~ dispatch action 전 ~ 비동기로 활용
    next(action);
    //기능 추가 ~ dispatch action 후 ~ 비동기로 활용
    console.log('action is end') 
};

 

* 미들웨어 실행 - applyMiddleware

const enhancer = applyMiddleware(middleware);

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

 

✨ thunkMiddleware

리덕스 thunk 사용해서 비동기 형태의 코드를 작성할 수 있다.

action은 객체형 이라고 이전 포스트에서 언급한 적이 있다.

그런데, thunk는 action 을 함수형태로 사용하여, 기본 action 과 구분된다.

const thunkMiddleware = (store) => (next) => (action) => {
    if (typeof action === 'function') {
        return action(store.dispatch, store.getState);
    }
    return next(action);
}

- 액션이 함수형일 경우, 즉 객체가 아닌 경우 = 비동기인 경우 액션을 함수로 넣어준다.
- 기본적으로 액션은 동기이다.(객체형태)
- 로그인/회원가입/게시글 작성 등 서버를 한 번 거쳐와야 하는 것들이 모두 비동기다.

 

✨ 일반 미들웨어와 함께 사용하기

const enhancer = compose(
    applyMiddleware(
    firstMiddleware, 
    thunkMiddleware
    ),
)

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