[Redux] Redux middleware 만드는 방법

[Redux] 리덕스 미들웨어 만드는 방법  

---

 

간단한 미들웨어를 만드는 코드예시이다.

예시를 통해 Redux middleware 만드는 방법과 적용방법을 확인 할 수 있다. 

@ LoggingMiddleware

// redux에서 middleware는 3단 함수로 만들어 주어야 한다.
// dispatch 함수 이전에 console을 찍어 간단한 로깅미들웨어를 만들수 있다.
const LoggingMiddleware = (store) => (dispatch) => (action) => {
  // 기능 추가 : dispatch 이전
  console.log("로깅", action);
  dispatch(action);
  // 기능 추가 : dispatch 이후
};

@ ThunkMiddleware

// thunkMiddleware는 Redux에서 비동기처리를 도와주는 Middleware이다.
// action의 타입이 함수일 경우 비동기처리를 해준다.
// action의 타입이 함수가 아닐경우 동기처리를 해준다.
const thunkMiddleware = (storte) => (dispatch) => (action) => {
  if (typeof action === "function") {
    // action이 함수이면 비동기처리 해준다.
    return action(store.dispatch, store.getState);
  }
  return dispatch(action); // 동기
};

@ Middleware 연결하기

// applyMiddleware를 이용해, 두개의 Middleware를 연결해주었다.
// createStore의 세번째 인자로 Middleware를 넣어준다.
const enhancer = applyMiddleware(LoggingMiddleware, thunkMiddleware);
const store = createStore(reducer, initialState, enhancer);